Расчет времени загрузки страницы в 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;

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

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

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

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

Источник

6 ответов

Решение

Никогда не используйте 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>
Источник

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

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.

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

Больше информации

Источник

Ответ, упомянутый @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

Источник

Трудно сделать хороший выбор времени, потому что performance.dominteractive неверно просчитан (во всяком случае, интересная ссылка для разработчиков времени).

Когда dom анализируется, он все равно может загружать и выполнять отложенные сценарии. И встроенные сценарии, ожидающие css (блокирование css dom), должны быть загружены также до загрузки DOMContent. Так что еще не разобрали?

И у нас есть событие readystatechange, где мы можем посмотреть на readyState, который, к сожалению, отсутствует "dom is parsed", который происходит где-то между "загруженным" и "интерактивным".

Все становится проблематичным, когда даже не Timing API дает нам время, когда dom прекратил парсинг HTML и начал процесс End. Этот стандарт гласит, что первым пунктом должно быть то, что "интерактивные" срабатывает именно после того, как dom проанализировал! И Chrome, и FF реализовали это, когда документ завершил загрузку через некоторое время после его анализа. Похоже, что они (неправильно) интерпретируют стандарты, поскольку синтаксический анализ продолжается после отложенных сценариев, выполняемых в то время, как люди неверно истолковывают DOMContentLoaded как что-то случайное до выполнения, а не после. Тем не мение...

Я рекомендую вам прочитать об API навигации. Или идите легким путем и выберите один из них, или запустите все три и посмотрите в консоли браузера...

  document.addEventListener('readystatechange', function() { console.log("Fiered '" + document.readyState + "' after " + performance.now() + " ms"); });

  document.addEventListener('DOMContentLoaded', function() { console.log("Fiered DOMContentLoaded after " + performance.now() + " ms"); }, false);

  window.addEventListener('load', function() { console.log("Fiered load after " + performance.now() + " ms"); }, false);

Время в миллисекундах после начала документа. Я проверил с API навигации по времени.

Чтобы получить секунды на экзамен со времени, которое вы сделали var ti = performance.now() ты можешь сделать parseInt(performance.now() - ti) / 1000

Вместо такого рода вычитаний performance.now() код становится немного короче с помощью User Timing API, где вы устанавливаете метки в своем коде и измеряете между метками.

Источник

вот выражение, которое дает точное значение:

      window.performance.timing.loadEventEnd-window.performance.timing.navigationStart
Источник

Мы также можем использовать loadEventStart.

      window.onload = {
  const performanceTiming = performance.timing;
  const navigationStart = performanceTiming.navigationStart;
  const loadEventStart = performanceTiming.loadEventStart;
  const pageLoadTime = loadEventStart - navigationStart;
  console.log({pageLoadTime});
}
Источник
Другие вопросы по тегам