Измерение времени загрузки сайта с помощью performance api

Question

Измерение времени загрузки сайта с помощью performance api

Несколько дней назад я слушал выступление Стива Соудерса, и он упомянул о новой спецификации производительности, которую внедряют новые браузеры, и это было довольно интригующе. В своей речи он упомянул следующий пример как средство измерения воспринимаемого времени загрузки страницы:

var timing = performance.timing;

var loadtime = timing.loadEventEnd - timing.navigationStart;

alert("Perceived time:"+loadtime);

Очевидно, что это базовый пример, но при попытке его в моей среде разработки, я получаю сумасшедшие числа, такие как -1238981729837 в качестве ответа, потому что loadEventEnd

Очевидно, что-то не так и есть много улучшений, которые могут быть сделаны в этом примере, чтобы дать больше информации и обеспечить большую надежность. (Я знаю, что это реализовано только в нескольких браузерах).

Итак, каковы некоторые предложения по использованию этого api для отслеживания времени загрузки страницы с помощью Javascript для анализа производительности моего сайта?

728 3

javascript performance optimization analytics navigation-timing-api

3 ответов:

Comments

Ничего не найдено.

kennebec · Accepted Answer · 2011-09-30 11:33:12

У меня не было проблем с его использованием, но я не пытался измерить производительность на локальной машине - он прекрасно работает на веб-сайте. Интересно посмотреть на другие сайты, чтобы было с чем сравнивать свои цифры.

Например, это хорошие цифры для размера страниц и их ресурсов -

http://stackoverflow.com/questions/7606972/measuring-site-load-times-
Friday, September 30, 2011 4:03:52 AM
//
(timestamp:1317369511747)
navigationStart= 0 milliseconds elapsed 

//
fetchStart= 0
domainLookupStart= 0
domainLookupEnd= 0
requestStart= 0
//
responseStart= 359
responseEnd= 359
domLoading= 359
//
unloadEventStart= 375
unloadEventEnd= 375
//
domInteractive= 515
domContentLoadedEventStart= 515
//
domContentLoadedEventEnd= 531
//
domComplete= 2496
loadEventStart= 2496
//
(timestamp:1317369514243)
loadEventEnd= 2496 milliseconds elapsed

http://www.yankeeweb.com/webshop.html
Friday, September 30, 2011 4:22:25 AM
//
(timestamp:1317370911738)
navigationStart= 0 milliseconds elapsed 

//
fetchStart= 0
domainLookupStart= 0
//
domainLookupEnd= 281
connectStart= 281
//
connectEnd= 296
requestStart= 296
//
responseStart= 546
//
responseEnd= 562
domLoading= 562
//
domInteractive= 1264
domContentLoadedEventStart= 1264
domContentLoadedEventEnd= 1264
//
domComplete= 1622
loadEventStart= 1622
//
(timestamp:1317370913360)
loadEventEnd= 1622 milliseconds elapsed

Что вам действительно нужно, так это номера, которые другие люди получают при посещении вашего сайта - вы можете включить его в форму questionaire или рассылки, (от firefox 7 и chrome, пока.)

/ / код запуска в firefox scratchpad:

(function(){
    if(!window.performance || !performance.timing) return;
    var timestamp, first, hstr, L,

    ptA= ['navigationStart', 'unloadEventStart', 'unloadEventEnd', 'redirectStart',
    'redirectEnd', 'fetchStart', 'domainLookupStart', 'domainLookupEnd', 'connectStart',
    'connectEnd', 'secureConnectionStart', 'requestStart', 'responseStart', 'responseEnd',
    'domLoading', 'domInteractive', 'domContentLoadedEventStart',
    'domContentLoadedEventEnd', 'domComplete', 'loadEventStart',
    'loadEventEnd'].map(function(itm){
        timestamp= performance.timing[itm];
        if(isFinite(timestamp) && timestamp!== 0){
            if(!first) first= timestamp;
            return [itm, timestamp, timestamp-first];
        }
        else return [1, NaN];
    }).filter(function(itm){
        return !isNaN(itm[1]);
    });
    ptA= ptA.sort(function(a, b){
        return a[1]-b[1];
    });
    if(report=== 1) return ptA;
    L= ptA.length-1;
    ptA= ptA.map(function(itm, i){
        if(i> 0 && ptA[i-1][2]!== itm[2]) itm[0]= '//\n'+itm[0];
        if(i=== 0 || i=== L){
            itm[0]= '//\n(timestamp:'+itm[1]+ ')\n'+itm[0];
            itm[2]+= ' milliseconds elapsed \n';
        }
        return itm[0]+'= '+itm[2];
    });
    hstr= '\n'+location.href+'\n'+ new Date().toLocaleString()+'\n';
    return hstr+ptA.join('\n');
})()

Ionut Popa · Accepted Answer · 2012-06-15 13:07:21

Вам нужно измерить loadEventEnd после завершения события onload, иначе оно будет сообщено как 0, как никогда раньше. (пример jquery для присоединения к событию onload)
$(window).load(function(){
 setTimeout(function(){
 window.performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {};
 var timing = performance.timing || {};
 var parseTime = timing.loadEventEnd - timing.responseEnd;
 console.log('Parsetime: ', parseTime);
 }, 0);
});

Sam Dutton · Accepted Answer · 2012-12-06 16:54:43

Хороший ответ от Ионута попа.

Сумасшедшие числа, такие как -1238981729837 в качестве ответа, потому что loadEventEnd

LoadEventEnd не меньше нуля, онравен нулю.

В качестве навигационного времени spec заявляет: "этот атрибут должен возвращать время, когда событие загрузки текущего документа завершено. Он должен возвращать ноль, если событие загрузки не запущено или не завершено.'

Поэтому timing.loadEventEnd - timing.navigationStart будет отрицательный.

FWIW, вот версия без jQuery:
window.onload = function(){
  setTimeout(function(){
    var t = performance.timing;
    console.log(t.loadEventEnd - t.responseEnd);
  }, 0);
}