window.performance详解

performance的作用

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

浏览器支持情况

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

pc端
window.performance : ie9
window.webkitPerformance : chrome6-9
window.performance : chrome10+
移动端
android4.0

各个值的详细含义
api的接口定义如下：

memory：浏览器内存情况

jsHeapSizeLimit
totalJSHeapSize
usedJSHeapSize
注：usedJSHeapSize表示所有被使用的js堆栈内存；totalJSHeapSize表示当前js堆栈内存总大小，这表示usedJSHeapSize不能大于totalJSHeapSize，如果大于，有可能出现了内存泄漏。

navigation ：网页导航相关

redirectCount：重定向属性
一个只读属性，返回当前页面是几次重定向才过来的。但是这个接口有同源策略限制，即仅能检测同源的重定向。
type
返回值应该是0,1,2 中的一个。分别对应三个枚举值:

0 : TYPE_NAVIGATE (用户通过常规导航方式访问页面，比如点一个链接，或者一般的get方式)

1 : TYPE_RELOAD (用户通过刷新，包括JS调用刷新接口等方式访问页面)

2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)

timing ：测速相关

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 资源测速

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);//活动页面
};

window.performance详解相关推荐

window.open详解
1 window.open详解window.open详解window.open详解 http://www.faq120.com/read.php?tid-356.html <SCRIPT&g ...
Extjs Window用法详解 3 打印具体应用，是否关掉打印预览的界面
Extjs Window用法详解 3 打印具体应用,是否关掉打印预览的界面 Extjs 中的按钮元素 { xtype: 'buttongroup', title: '打印', items: [ me. ...
window.parent ,window.top,window.self 详解
转载:Js中的window.parent ,window.top,window.self 详解在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中 ...
网页打开新窗口——Window.open()详解
[html] view plain copy Window.Open详解一.window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Oper ...
C# ManagementObjectSearcher操作window案例详解
C# ManagementObjectSearcher操作window案例详解* 前言: 我们在很多情况下想要获得计算机的硬件或操作系统的信息,比如获得CPU序列号给自己的软件添加机器码锁绑定指定电脑 ...
JS弹出窗口Window.Open详解
JS弹出窗口Window.Open详解一.window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: windo ...
JS window对象详解
JS window对象详解 1.window对象 2.窗口操作打开窗口关闭窗口 3.对话框 confirm prompt 4.定时器 setTimeout和clearTimeout setInte ...
Window对象详解
注:页面上元素name属性以及JavaScript引用的名称必须一致包括大小写否则会提示你1个错误信息 "引用的元素为空或者不是对象" --------------------- ...
前端性能优化-Performance详解
Performance 接口可以获取到当前页面中与性能相关的信息. 它是 High Resolution Time API 的一部分,同时也融合了 Performance Timeline API.N ...

window.performance详解

performance的作用

浏览器支持情况

各个值的详细含义
api的接口定义如下：

组合值的意义

performance.getEntries 资源测速

常用统计方法

window.performance详解相关推荐

最新文章

热门文章

window.performance详解

performance的作用

浏览器支持情况

各个值的详细含义 api的接口定义如下：

组合值的意义

performance.getEntries 资源测速

常用统计方法

window.performance详解相关推荐

最新文章

热门文章

各个值的详细含义
api的接口定义如下：