Se è necessario ottenere tempi di esecuzione delle funzioni sulla macchina di sviluppo locale , è possibile utilizzare gli strumenti di profilatura del browser o comandi della console come console.time()
e console.timeEnd()
.
Tutti i browser moderni hanno profilatori JavaScript integrati. Questi profilatori dovrebbero fornire la misurazione più accurata in quanto non è necessario modificare il codice esistente, il che potrebbe influire sul tempo di esecuzione della funzione.
Per profilare il tuo JavaScript:
- In Chrome , premi F12 e seleziona la scheda Profili , quindi Raccogli profilo CPU JavaScript .
- In Firefox , installa / apri Firebug e fai clic sul pulsante Profilo .
- In IE 9+ , premi F12 , fai clic su Script o Profiler (a seconda della versione di IE).
In alternativa, sulla tua macchina di sviluppo , puoi aggiungere strumenti al tuo codice con console.time()
e console.timeEnd()
. Queste funzioni, supportate in Firefox11 +, Chrome2 + e IE11 +, riportano sui timer con cui si avvia / si interrompe console.time()
. time()
accetta come argomento un nome timer definito dall'utente, timeEnd()
quindi riporta il tempo di esecuzione dall'inizio del timer:
function a() {
console.time("mytimer");
... do stuff ...
var dur = console.timeEnd("myTimer"); // NOTE: dur only works in FF
}
Nota che solo Firefox restituisce il tempo trascorso nella timeEnd()
chiamata. Gli altri browser riportano semplicemente il risultato alla console dello sviluppatore: il valore restituito di timeEnd()
non è definito.
Se vuoi ottenere il tempo di esecuzione della funzione in natura , dovrai strumentare il tuo codice. Hai un paio di opzioni. Puoi semplicemente salvare l'ora di inizio e di fine eseguendo una query new Date().getTime()
:
function a() {
var start = new Date().getTime();
... do stuff ...
var end = new Date().getTime();
var dur = end - start;
}
Tuttavia, l' Date
oggetto ha solo una risoluzione di millisecondi e sarà influenzato da eventuali modifiche all'orologio del sistema operativo. Nei browser moderni, c'è un'opzione migliore.
L'opzione migliore è utilizzare il tempo ad alta risoluzione , ovvero window.performance.now()
. now()
è meglio del tradizionale Date.getTime()
in due modi importanti:
now()
è un doppio con risoluzione submillisecondo che rappresenta il numero di millisecondi dall'inizio della navigazione della pagina. Restituisce il numero di microsecondi in frazionario (ad es. Un valore di 1000.123 è 1 secondo e 123 microsecondi).
now()
sta aumentando monotonicamente. Questo è importante in quanto Date.getTime()
può eventualmente saltare in avanti o addirittura indietro nelle chiamate successive. In particolare, se viene aggiornato l'orario di sistema del sistema operativo (ad es. Sincronizzazione dell'orologio atomico), Date.getTime()
viene aggiornato. now()
è garantito per essere sempre crescente monotonicamente, quindi non è influenzato dall'ora di sistema del sistema operativo - sarà sempre l'ora dell'orologio da parete (supponendo che l'orologio da parete non sia atomico ...).
now()
può essere utilizzato in quasi tutti i luoghi che new Date().getTime()
, e + new Date
lo Date.now()
sono. L'eccezione è che Date
e now()
volte non si mescolano, come Date
è basato su unix-epoca (il numero di millisecondi dal 1970), mentre now()
è il numero di millisecondi dal momento che la navigazione pagina iniziata (quindi sarà molto più piccola di Date
).
Ecco un esempio di come usare now()
:
function a() {
var start = window.performance.now();
... do stuff ...
var end = window.performance.now();
var dur = end - start;
}
now()
è supportato in Chrome stable, Firefox 15+ e IE10. Ci sono anche diversi polyfill disponibili.
Un'altra opzione per misurare i tempi di esecuzione in natura è UserTiming . UserTiming si comporta in modo simile a console.time()
e console.timeEnd()
, ma utilizza lo stesso timestamp ad alta risoluzione che now()
utilizza (in modo da ottenere un clock monotonicamente crescente di un millesimo di secondo) e salva i timestamp e le durate su PerformanceTimeline .
UserTiming ha i concetti di segni (timestamp) e misure (durate). Puoi definire quanti ne desideri e sono esposti su PerformanceTimeline .
Per salvare un timestamp, si chiama mark(startMarkName)
. Per ottenere la durata dal primo segno, è sufficiente chiamare measure(measurename, startMarkname)
. La durata viene quindi salvata in PerformanceTimeline accanto ai tuoi voti.
function a() {
window.performance.mark("start");
... do stuff ...
window.performance.measure("myfunctionduration", "start");
}
// duration is window.performance.getEntriesByName("myfunctionduration", "measure")[0];
UserTiming è disponibile in IE10 + e Chrome25 +. C'è anche un polyfill disponibile (che ho scritto).