Расчет времени загрузки страницы в JavaScript

Я пытаюсь создать веб-страницу, которая при загрузке использует интервал для запуска таймера.

Когда страница полностью загружается, она останавливает таймер,

но в 99% случаев я получаю измерения времени 0,00 или 0,01, даже если это занимает больше времени.

Иногда он говорит что-то, что имеет больше смысла как .28 или 3.10 в несколько раз.

Вот код, если он помогает:

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;

Таким образом, он в основном создает переменную сотен thimer, которая увеличивается на "1" каждые 10 миллисекунд (0,01 секунды).

Затем, если это число достигает 1000 (1 полная секунда), переменная с именем secondplace увеличивается на 1, так как это количество полных секунд, за которые она выполнялась.

Затем он предупреждает секундное, десятичное значение и сотое место как общее время загрузки.

Но проблема выше с неправильными числами все еще существует. Почему?

Ответ 1

Никогда не используйте setInterval или setTimeout для измерения времени! Они ненадежны, и очень вероятно, что планирование выполнения JS во время разбора и отображения документов задерживается.

Вместо этого используйте объект Date для создания отметки времени при загрузке страницы и расчета разницы с временем, когда страница была полностью загружена:

<doctype html>
<html>
    <head>
        <script type="text/javascript">
            var timerStart = Date.now();
        </script>
        <!-- do all the stuff you need to do -->
    </head>
    <body>
        <!-- put everything you need in here -->

        <script type="text/javascript">
             $(document).ready(function() {
                 console.log("Time until DOMready: ", Date.now()-timerStart);
             });
             $(window).load(function() {
                 console.log("Time until everything loaded: ", Date.now()-timerStart);
             });
        </script>
    </body>
</html>

Ответ 2

Почему так сложно? Когда вы можете сделать:

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

Если вам нужно больше раз проверить объект window.performance:

console.log(window.performance);

Покажет вам объект синхронизации:

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.

Поддержка браузера

Дополнительная информация

Ответ 3

Ответ, упомянутый @HaNdTriX, замечательный, но мы не уверены, полностью ли DOM загружен в приведенном ниже коде:

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

Это отлично работает при использовании с onload как:

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

Изменить 1: Добавлен контекст для ответа

Примечание: loadTime находится в миллисекундах, вы можете разделить на 1000, чтобы получить секунды, как указано @nycynik