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' Dateoggetto 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 Datelo Date.now()sono. L'eccezione è che Datee 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).