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可视化插件