Calculando o tempo de carregamento da página em JavaScript

Eu estou tentando fazer uma página da Web que, quando ele inicia o carregamento, usa um Intervalo para iniciar um cronômetro.

Quando a página é totalmente carregada, pára o timer,

mas 99% das vezes eu obtenho medições de tempo de 0,00 ou 0,01, mesmo que demore mais.

Ocasionalmente, diz algo que faz mais sentido como 0,28 ou 3,10 em alguns momentos.

Aqui está o código, se isso ajuda:

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; 

Por isso, basicamente cria uma variável chamada cemthstimer que é aumentada em ‘1’ a cada 10 milissegundos (0,01 segundos).

Então, se esse número atingir 1000 (1 segundo inteiro), uma variável chamada segundosplace subirá 1, já que são quantos segundos completos foram executados.

Em seguida, ele alerta o segundo lugar, um ponto decimal e o centésimo lugar como o tempo total de carregamento.

Mas o problema acima com números incorretos ainda existe. Por quê?

Nunca use as funções setInterval ou setTimeout para medir o tempo! Eles não são confiáveis ​​e é muito provável que o planejamento de execução do JS durante a análise e exibição de um documento esteja atrasado.

Em vez disso, use o object Date para criar um registro de data e hora quando a página começar a carregar e calcule a diferença para a hora em que a página foi totalmente carregada:

            

Por que tão complicado? Quando você pode fazer:

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

Se você precisar de mais vezes, verifique o object window.performance:

 console.log(window.performance); 

Mostrará o object de tempo:

 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. 

Suporte de Navegador

Mais informações

A resposta mencionada pelo @HaNdTriX é ótima, mas não temos certeza se o DOM está completamente carregado no código abaixo:

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

Isso funciona perfeitamente quando usado com onload como:

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

Editar 1: Adicionado algum contexto para responder

Nota: loadTime é em milissegundos, você pode dividir por 1000 para obter segundos como mencionado por @nycynik