Время загрузки страницы с помощью JavaScript

Question

Я ищу правильный способ проверить, сколько времени требуется странице, чтобы полностью загрузить все ее ресурсы. Что я сделал до сих пор, это добавить:

window.startTime = (new Date).getTime(); // after the title in my page

А также

window.onload = function () {
    console.log((new Date).getTime() - window.startTime);
}
window.addEventListener('load',function () {
    console.log((new Date).getTime() - window.startTime);   
},false);

Путь вниз в нижнем колонтитуле. Это хороший способ измерения? Могут ли быть различия между временем загрузки и предполагаемым временем загрузки? Из того, что я вижу, события запускаются после загрузки всех ресурсов, включая изображения. Есть ли различия между этими двумя событиями? Также я могу использовать PageSpeed ​​для проверки этого? (Я знаю, что могу сделать это с помощью инструментов chrome dev, но мне также нужен скрипт, чтобы я мог отслеживать данные.)

Answer 1

Это единственный способ в старых браузерах измерять время. Но для спасения большинство браузеров реализуют window.performance объект, который предлагает очень, очень точный способ получения времени.

Типичный window.performance.timing выход:

connectEnd 1351036536696
connectStart 1351036536696
domComplete 1351036538277
domContentLoadedEventEnd 1351036538146
domContentLoadedEventStart 1351036538119
domInteractive 1351036538042
domLoading 1351036537552
domainLookupEnd 1351036536694
domainLookupStart 1351036536694
fetchStart 1351036536696
loadEventEnd 1351036538295
loadEventStart 1351036538277
navigationStart 1351036536696

.. который даже не полный список.

Answer 2

Если вы просто отлаживаете время загрузки страницы на своем локальном компьютере, Firebx в Firefox, инструменты разработчика Chrome и инструменты разработчика F12 в IE предоставляют информацию о последних временах загрузки страницы.

Чтобы получить время загрузки страницы посетителями вашего сайта в реальном мире, вам нужно использовать показатели загрузки страниц Real User Monitoring (или RUM). Я бы порекомендовал заглянуть в спецификацию NavigationTiming. Эта спецификация, поддерживаемая в IE9+, FF7+ и Chrome6+, предоставляет время загрузки страницы (например, DNS, TCP-соединение, запрос, ответ и время DOM) через DOM браузера. Это позволяет вам получать данные о времени загрузки страницы с точностью до миллисекунды для каждого посетителя, который посещает ваш сайт в современном браузере.

Он показывает все эти метрики на временной шкале:

Теперь, когда эти показатели доступны, есть несколько способов их использования.

Для решения "Сделай сам" Boomerang - это сторонняя библиотека, которая использует NavigationTiming в современных браузерах для отправки этих данных обратно в центр обработки данных. В старых браузерах есть несколько интересных трюков, которые отслеживают переходы между страницами на вашем сайте, чтобы определить, сколько времени занимает загрузка страниц.

Если вы не заинтересованы в выяснении всего, что связано с Бумерангом, есть несколько других поставщиков услуг, которые используют данные NavigationTiming (и аналогичные) для отчета о производительности загрузки страниц, такие как Google Analytics, New Relic, Pingdom и Speedcurve.

Answer 3

Я думаю об использовании Firebug Firefox:

..или Инструменты разработчика Chrome (нажмите F12)

Смотрите также:

• https://getfirebug.com/network
• https://developers.google.com/chrome-developer-tools/docs/network

Answer 4

Введите это в консоли браузера:

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

Answer 5

Подход JavaScript во многом зависит от веб-браузера. Почему бы вам не попробовать FireBug для Firefox, DevTools для Chrome и Firebug Lite для IE.

Если вы все еще хотите написать код, используйте объект window.performance.

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

Answer 6

Я обычно использовал комбинацию YSlow, PageSpeed ​​и вкладки Net в Firebug для измерения времени загрузки страницы и диагностики потенциальных проблем. Firebug содержит много информации, которая может оказаться полезной, если вы еще не проверили это.