Quando scriviamo diverse versioni di un frammento di codice e ci poniamo la classica domanda “quale di queste due versioni è la più veloce”, il metodo migliore è misurarne l’occupazione di memoria, i processi coinvolti e soprattutto il tempo di esecuzione.
Non entrando nello specifico dei primi due elementi, gestiti in maniera autonoma da Google Chrome, vediamo come si misura il tempo di esecuzione di uno script.
Esistono due principali metodi su come misurare il tempo di esecuzione, uno generico ed applicabile a quasi tutti i linguaggi di programmazione e l’altro che utilizza delle funzioni interne della Chrome console.
Metodo generico del calcolo del tempo di esecuzione
Il metodo più semplice per il calcolo del tempo di esecuzione di uno script è tramite l’utilizzo delle date, subito prima dell’esecuzione dello script si memorizza la data comprensiva di orario e millisecondi ed alla fine dell’esecuzione dello script desiderato si richiede nuovamente la data. La differenza in millisecondi tra queste due date effettive ci restituirà il tempo di esecuzione.
Guardiamo il comportamento su uno script che prende molto tempo al sistema, un ciclo finito con numero di esecuzioni molto elevato.
let result = 0;
let counter = 0;
const dateStart = Date.now(); //start time
while(counter<5000000){
result += Math.PI;
counter++;
}
const dateEnd = Date.now(); //end time
const executionTime = dateEnd - dateStart;
console.log(`The result is: ${result}`);
console.log(`Execution time: ${executionTime} ms`);
Il frammento di codice si occupa di dichiarare una variabile pari a zero chiamata result dove salveremo il numero che incrementeremo ogni volta con un valore pari al Math.PI ovvero il PI greco.
La variabile counter si occuperà di contare il numero di cicli già effettuati e va incrementata ogni volta che l’operazione su result viene effettuata.
L’operazione più onerosa quindi sarà sicuramente il ciclo while, per questo lo contorniamo con la data di inizio e la data di fine dell’esecuzione per poi esporre il risultato executionTime che è dato dalla differenza tra dateEnd e dateStart, rispettivamente la data ed ora di fine dell’esecuzione e data di inizio precedentemente memorizzata.
Il risultato in console sarà visualizzato in questo modo:
Utilizzo del console.time()
La soluzione più completa quando si interagisce con Google Chrome è l’utilizzo della funzionalità dedicata console.time() e console.timeEnd() che ci permette, senza dispendio a livello righe di codice, di creare un numero di timer a seconda delle operazioni che vogliamo monitorare.
Guardiamo l’approccio su questo frammento di codice simile al precedente:
let result = 0;
let counter = 0;
console.time();
while(counter<5000000){
result += Math.PI;
counter++;
}
console.timeEnd();
console.log(`The result is: ${result}`);
In questo caso l’intervallo temporale è calcolato automaticamente dalla console ed il risultato sarà mostrato con un livello di dettaglio maggiore del precedente poiché non soggetto ad arrotondamenti.
Il risultato sarà:
Notiamo che il tempo di esecuzione è visualizzato come il risultato di default perché questa funzione può essere utilizzata per avviare più di un timer nello stesso script ed avere il report di esecuzione alla fine.
Vediamo quindi come dichiarare più di un timer per monitorare l’esecuzione di due cicli finiti:
let resultOne = resultTwo = counterOne = counterTwo = 0;
console.time('timer-one');
while(counterOne<5000000){
resultOne += Math.PI;
counterOne++;
}
console.timeEnd('timer-one');
console.time('timer-two');
while(counterTwo<5000000){
resultTwo += Math.PI;
counterTwo++;
}
console.timeEnd('timer-two');
console.log(`The result is: ${resultOne}`);
console.log(`The result is: ${resultTwo}`);
In questo caso i due cicli finiti sono monitorati da due timer nominati timer-one e timer-two, le rispettive console.timeEnd(“…”) concludono il monitoraggio del rispettivo timer che è definito nel console.time(“…”).
Il risultato sarà: