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

22
javascript page-load-time

6 ответов

Это очень много только способ в устаревших браузерах для измерения времени. Но для спасения, большинство браузеров использовать 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

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

37

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

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

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

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

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

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

26

Я рассматриваю возможность использования Firebug Firefox:

enter image description here

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

Читайте также:

2

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

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

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

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

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

0

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

0