performance的作用

浏览器暴露给js的一个接口,可以通过这个接口查看用户访问网站的连接建立时间、dns时间等信息。使用该api时需要在页面完全加载完成之后才能使用,最简单的办法是在window.onload事件中读取各种数据,因为很多值必须在页面完全加载之后才能得出。

浏览器支持情况

IE9和chrome6以上的版本都支持:

  • pc端

  • window.performance : ie9

  • window.webkitPerformance : chrome6-9

  • window.performance : chrome10+

  • 移动端

  • android4.0

各个值的详细含义

img
可以看到api的接口定义如下:

memory:浏览器内存情况

  1. jsHeapSizeLimit

  2. totalJSHeapSize

  3. usedJSHeapSize 注:usedJSHeapSize表示所有被使用的js堆栈内存;totalJSHeapSize表示当前js堆栈内存总大小,这表示usedJSHeapSize不能大于totalJSHeapSize,如果大于,有可能出现了内存泄漏

navigation :网页导航相关

  1. redirectCount:重定向属性 一个只读属性,返回当前页面是几次重定向才过来的。但是这个接口有同源策略限制,即仅能检测同源的重定向。

  2. type 返回值应该是0,1,2 中的一个。分别对应三个枚举值:
    0 : TYPE_NAVIGATE  (用户通过常规导航方式访问页面,比如点一个链接,或者一般的get方式)
    1 : TYPE_RELOAD  (用户通过刷新,包括JS调用刷新接口等方式访问页面)
    2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)

timing :测速相关

img

navigationStart:准备加载新页面的起始时间
redirectStart:如果发生了HTTP重定向,并且从导航开始,中间的每次重定向,都和当前文档同域的话,就返回开始重定向的timing.fetchStart的值。其他情况,则返回0
redirectEnd:如果发生了HTTP重定向,并且从导航开始,中间的每次重定向,都和当前文档同域的话,就返回最后一次重定向,接收到最后一个字节数据后的那个时间.其他情况则返回0
fetchStart:如果一个新的资源获取被发起,则 fetchStart必须返回用户代理开始检查其相关缓存的那个时间,其他情况则返回开始获取该资源的时间
domainLookupStart:返回用户代理对当前文档所属域进行DNS查询开始的时间。如果此请求没有DNS查询过程,如长连接,资源cache,甚至是本地资源等。 那么就返回 fetchStart的值
domainLookupEnd:返回用户代理对结束对当前文档所属域进行DNS查询的时间。如果此请求没有DNS查询过程,如长连接,资源cache,甚至是本地资源等。那么就返回 fetchStart的值
connectStart:返回用户代理向服务器服务器请求文档,开始建立连接的那个时间,如果此连接是一个长连接,又或者直接从缓存中获取资源(即没有与服务器建立连接)。则返回domainLookupEnd的值
(secureConnectionStart):可选特性。用户代理如果没有对应的东东,就要把这个设置为undefined。如果有这个东东,并且是HTTPS协议,那么就要返回开始SSL握手的那个时间。 如果不是HTTPS, 那么就返回0
connectEnd:返回用户代理向服务器服务器请求文档,建立连接成功后的那个时间,如果此连接是一个长连接,又或者直接从缓存中获取资源(即没有与服务器建立连接)。则返回domainLookupEnd的值
requestStart:返回从服务器、缓存、本地资源等,开始请求文档的时间
responseStart:返回用户代理从服务器、缓存、本地资源中,接收到第一个字节数据的时间
responseEnd:返回用户代理接收到最后一个字符的时间,和当前连接被关闭的时间中,更早的那个。同样,文档可能来自服务器、缓存、或本地资源
domLoading:返回用户代理把其文档的 "current document readiness" 设置为 "loading"的时候
domInteractive:返回用户代理把其文档的 "current document readiness" 设置为 "interactive"的时候.
domContentLoadedEventStart:返回文档发生 DOMContentLoaded事件的时间
domContentLoadedEventEnd:文档的DOMContentLoaded 事件的结束时间
domComplete:返回用户代理把其文档的 "current document readiness" 设置为 "complete"的时候
loadEventStart:文档触发load事件的时间。如果load事件没有触发,那么该接口就返回0
loadEventEnd:文档触发load事件结束后的时间。如果load事件没有触发,那么该接口就返回0

组合值的意义

DNS查询耗时 :domainLookupEnd - domainLookupStart
TCP链接耗时 :connectEnd - connectStart
request请求耗时 :responseEnd - responseStart
解析dom树耗时 : domComplete - domInteractive
白屏时间 :responseStart - navigationStart
domready时间 :domContentLoadedEventEnd - navigationStart
onload时间 :loadEventEnd - navigationStart

performance.getEntries 资源测速

img
比如图中type为img的图片整个加载时间为duration ms。
可以通过这个接口统计整个页面有多少img、css、js以及对应的下载时间等信息。

常用统计方法

performance 测速上报

     /**
 * 上报Performance timing数据;
 * 如果某个时间点花费时间为0,则此时间点数据不上报。
 * @param {String}
 *            f1 flag1简写,测速系统中的业务ID,譬如校友业务为164
 * @param {String}
 *            f2 flag2简写,测速的站点ID
 * @param {String}
 *            f3_ie flag3简写,测速的页面ID
 *(因为使用过程中我们发现IE9的某些数据存在异常,
 * 如果IE9和chrome合并统计,会影响分析结果,所以这里建议分开统计)
 * @param {String}
 *            f3_c flag3简写,测速的页面ID
 * (如果为空,则IE9和chrome合并统计)
 */
function setTimingRpt(f1, f2, f3_ie, f3_c){     
    var _t, _p = (window.webkitPerformance ? window.webkitPerformance : window.msPerformance), _ta = ["navigationStart","unloadEventStart","unloadEventEnd","redirectStart","redirectEnd","fetchStart","domainLookupStart","domainLookupEnd","connectStart","connectEnd","requestStart",/*10*/"responseStart","responseEnd","domLoading","domInteractive","domContentLoadedEventStart","domContentLoadedEventEnd","domComplete","loadEventStart","loadEventEnd"], _da = [], _t0, _tmp, f3 = f3_ie;  
    _p = (_p ? _p : window.performance);        
    if (_p && (_t = _p.timing)) {       
        if (!_t.domContentLoadedEventStart) {
            _ta.splice(15, 2, 'domContentLoaded', 'domContentLoaded');
        } else {
            if (f3_c) {
                f3 = f3_c;
            }
        }           
        _t0 = _t[_ta[0]];
        for (var i = 1, l = _ta.length; i < l; i++) {
            _tmp = _t[_ta[i]];
            _tmp = (_tmp ? (_tmp - _t0) : 0);
            if (_tmp > 0) {
                _da.push( i + '=' + _tmp);
            }
        }           
        if (window.d0) {//统计页面初始化时的d0时间
            _da.push('30=' + (window.d0 - _t0));
        }           
        var url = 'http://www.report.com?flag1=' + f1 + '&flag2=' + f2 + '&flag3=' + f3 + '&' + _da.join('&');      
        var _img = new Image();
        setTimeout(function(){
            _img.src = url;
        }, 10);
    }       
};
//注意!需要在onload事件后进行计算上报。
window.onload = function(){
    setTimingRpt(7839, 7, 3);//活动页面
};

performance chrome可视化插件

performance chrome可视化插件