Подтвердить что ты не робот

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

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

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 ​​для проверки этого? (Я знаю, что могу сделать это в hrome dev tools, но мне также нужен script, чтобы я мог отслеживать данные.)

4b9b3361

Ответ 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

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

Ответ 2

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

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

Он предоставляет все эти метрики на временной шкале: enter image description here

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

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

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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