Calcolo del tempo di caricamento della pagina in JavaScript

Sto cercando di creare una pagina web che, quando inizia a caricare, utilizza un intervallo per avviare un timer.

Quando la pagina si carica completamente, arresta il timer,

ma il 99% delle volte ottengo misurazioni di tempo di 0,00 o 0,01 anche se richiede più tempo.

Occasionalmente, dice qualcosa che ha più senso come .28 o 3.10 in alcuni momentjs.

Ecco il codice se aiuta:

var hundredthstimer = 0; var secondplace = 0; function addinc(){ hundredthstimer += 1; if (inctimer == 100){ hundredthstimer = 0; secondplace += 1; } } var clockint = setInterval(addinc, 10); function init(){ var bconv1 = document.getElementById("bconverter1"); var bconv2 = document.getElementById("bconverter2"); $(bconv2).hide(); clearInterval(clockint); if (inctimer.len !== 2){ inctimer = "0" + inctimer; } alert(secondplace + "." + inctimer); } onload = init; 

Quindi, in pratica, crea una variabile chiamata centesimi, che viene incrementata di “1” ogni 10 millisecondi (0,01 secondi).

Quindi, se questo numero raggiunge 1000 (1 secondo completo), una variabile denominata secondo luogo aumenta di 1, poiché è il numero di secondi completi per cui è stata eseguita.

Quindi, avvisa il secondo, il punto decimale e il centesimo posto come tempo di caricamento totale.

Ma il problema sopra con numeri errati esiste ancora. Perché?

Non utilizzare mai le funzioni setInterval o setTimeout per la misurazione del tempo! Sono inaffidabili ed è molto probabile che la pianificazione dell’esecuzione JS durante l’analisi e la visualizzazione dei documenti sia ritardata.

Utilizzare invece l’ object Date per creare un timestamp all’avvio della pagina e calcolare la differenza rispetto al momento in cui la pagina è stata caricata completamente:

            

Perché così complicato? Quando puoi fare:

 var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart; 

Se hai bisogno di più orari, controlla l’object window.performance:

 console.log(window.performance); 

Ti mostrerà l’object temporale:

 connectEnd Time when server connection is finished. connectStart Time just before server connection begins. domComplete Time just before document readiness completes. domContentLoadedEventEnd Time after DOMContentLoaded event completes. domContentLoadedEventStart Time just before DOMContentLoaded starts. domInteractive Time just before readiness set to interactive. domLoading Time just before readiness set to loading. domainLookupEnd Time after domain name lookup. domainLookupStart Time just before domain name lookup. fetchStart Time when the resource starts being fetched. loadEventEnd Time when the load event is complete. loadEventStart Time just before the load event is fired. navigationStart Time after the previous document begins unload. redirectCount Number of redirects since the last non-redirect. redirectEnd Time after last redirect response ends. redirectStart Time of fetch that initiated a redirect. requestStart Time just before a server request. responseEnd Time after the end of a response or connection. responseStart Time just before the start of a response. timing Reference to a performance timing object. navigation Reference to performance navigation object. performance Reference to performance object for a window. type Type of the last non-redirect navigation event. unloadEventEnd Time after the previous document is unloaded. unloadEventStart Time just before the unload event is fired. 

Supporto del browser

Ulteriori informazioni

La risposta menzionata da @HaNdTriX è ottima, ma non siamo sicuri che il DOM sia completamente caricato nel seguente codice:

 var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart; 

Funziona perfettamente quando usato con onload come:

 window.onload = function () { var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; console.log('Page load time is '+ loadTime); } 

Modifica 1: aggiunto un contesto per rispondere

Nota: loadTime è in millisecondi, puoi dividerlo per 1000 per ottenere secondi come indicato da @nycynik