通过性能API测量站点负载时间 [英] Measuring Site Load Times via performance api

问题描述

几天前，我听了Steve Souders的演讲，他提到了更新的浏览器正在实现的新性能规格，这非常有趣.他在讲话中提到了以下示例，作为衡量感知页面加载时间的一种方法:

I listened to a talk by Steve Souders a few days ago and he mentioned the new performance spec that newer browsers are implementing and it was pretty intriguing. In his speech he mentioned the following example as a means of measuring perceived page load time:

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

很显然，这是一个基本示例，但是在我的开发环境中尝试时，我得到像-1238981729837这样的疯狂数字作为答案，因为loadEventEnd是< 0.

Clearly this is a basic example, but when trying it on my development environment, I get crazy numbers like -1238981729837 as the answer because loadEventEnd is < 0.

显然有些不对劲，可以对本示例进行许多改进，以提供更多信息并产生更高的可靠性. (我知道这仅在少数浏览器中实现).

Obviously something is amiss and there are many improvements that can be made to this example to give more information and produce a greater reliability. (I am aware this is only implemented in a few browsers).

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

So, what are some suggestions on how to use this api to track page load times via Javascript for analysis of my site performance?

推荐答案

我使用它没有问题，但是我没有尝试过在本地计算机上测量性能-在网站上运行正常. 查看其他网站很有趣，可以与您的号码进行比较.

I have had no trouble using it, but I haven't tried measuring performance on a local machine- it works fine on a website. It is interesting to look at other sites, to have something to compare your numbers with.

例如，对于页面大小及其资源来说，这是一个很好的数字-

for instance, these are good numbers for the size of the pages and their resources-

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).

What you really need are the numbers other people get when visiting your site- you could include it in a form questionaire or mailing, (from firefox 7 and chrome, so far.)

//代码在firefox暂存器中运行:

// code run in 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');
})()

这篇关于通过性能API测量站点负载时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！