通过性能api测量站点加载时间

Question

几天前我听了Steve Souders的演讲，他提到了新浏览器正在实现的新的性能规范，这非常有趣。在他的演讲中，他提到了下面的例子作为测量感知页面加载时间的方法:

var timing = performance.timing;
var loadtime = timing.loadEventEnd - timing.navigationStart;
alert("Perceived time:"+loadtime);

显然这是一个基本的例子，但是当在我的开发环境中尝试它时，我得到了像-1238981729837这样疯狂的数字作为答案，因为loaddeventend是<</p> 0。

显然有些地方出了问题，可以对这个例子进行许多改进，以提供更多的信息并产生更高的可靠性。(我知道这只在少数浏览器中实现)。

那么，关于如何使用这个api通过Javascript跟踪页面加载时间来分析我的网站性能有什么建议?

Answer 1

您需要在onload事件完成后度量loaddeventend，否则它将报告为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);
});

Answer 2

我使用它没有任何问题，但我没有尝试在本地机器上测量性能-它在网站上工作得很好。看看其他网站是很有趣的，有一些东西来比较你的数字。

例如

，这些是页面大小和资源的好数字-

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 

你真正需要的是其他人在访问你的网站时得到的数字——你可以把它包含在问卷调查或邮件中，(从firefox 7和chrome到目前为止)

//代码在firefox中运行:

(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');
})()

Answer 3

Ionut Popa的回答很好。

像-1238981729837这样疯狂的数字作为答案，因为loaddeventend是<0

loaddeventend不小于零，则为零。

正如导航时序规范所述:'这个属性必须返回当前文档加载事件完成的时间。当加载事件未触发或未完成时，它必须返回零。

因此timing.loadEventEnd - timing.navigationStart为负。

哎呀，这是一个非jquery版本:

window.onload = function(){
  setTimeout(function(){
    var t = performance.timing;
    console.log(t.loadEventEnd - t.responseEnd);
  }, 0);
}