是 W3C 性能小组引入的新的 API,目前 IE9 以上的浏览器都支持。一个 performance 对象的完整结构如下图所示:
字段代表 JavaScript 对内存的占用。
- memory
字段统计的是一些网页导航相关的数据:
- navigation
: 重定向的数量(只读),但是这个接口有同源策略限制,即仅能检测同源的重定向;
- redirectCount
最重要的是
字段的统计数据,它包含了网络、解析等一系列的时间数据。
- timing
2.2.1
API
- timing
的整体结构如下图所示:
- timing
各字段的含义如下:
:有些浏览器实现为,代表浏览器开始 unload 前一个页面文档的开始时间节点。比如我们当前正在浏览 baidu.com,在地址栏输入 google.com 并回车,浏览器的执行动作依次为:unload 当前文档(即 baidu.com)-> 请求下一文档(即 google.com)。navigationStart 的值便是触发 unload 当前文档的时间节点。
- startTime
和
- redirectStart
:如果页面是由 redirect 而来,则 redirectStart 和 redirectEnd 分别代表 redirect 开始和结束的时间节点;
- redirectEnd
和
- unloadEventStart
:如果前一个文档和请求的文档是同一个域的,则
- unloadEventEnd
和
- unloadEventStart
分别代表浏览器 unload 前一个文档的开始和结束时间节点。否则两者都等于 0;
- unloadEventEnd
是指在浏览器发起任何请求之前的时间值。在 fetchStart 和
- fetchStart
之间,浏览器会检查当前文档的缓存;
- domainLookupStart
和
- domainLookupStart
分别代表 DNS 查询的开始和结束时间节点。如果浏览器没有进行 DNS 查询(比如使用了 cache),则两者的值都等于
- domainLookupEnd
;
- fetchStart
和
- connectStart
分别代表 TCP 建立连接和连接成功的时间节点。如果浏览器没有进行 TCP 连接(比如使用持久化连接 webscoket),则两者都等于
- connectEnd
;
- domainLookupEnd
:可选。如果页面使用 HTTPS,它的值是安全连接握手之前的时刻。如果该属性不可用,则返回 undefined。如果该属性可用,但没有使用 HTTPS,则返回 0;
- secureConnectionStart
代表浏览器发起请求的时间节点,请求的方式可以是请求服务器、缓存、本地资源等;
- requestStart
和
- responseStart
分别代表浏览器收到从服务器端(或缓存、本地资源)响应回的第一个字节和最后一个字节数据的时刻;
- responseEnd
代表浏览器开始解析 html 文档的时间节点。我们知道 IE 浏览器下的 document 有
- domLoading
属性,
- readyState
的值就等于
- domLoading
改变为
- readyState
的时间节点;
- loading
代表浏览器解析 html 文档的状态为
- domInteractive
时的时间节点。
- interactive
并非 DOMReady,它早于 DOMReady 触发,代表 html 文档解析完毕(即 dom tree 创建完成)但是内嵌资源(比如外链 CSS、js 等)还未加载的时间点;
- domInteractive
:代表
- domContentLoadedEventStart
事件触发的时间节点:
- DOMContentLoaded
:代表
- domContentLoadedEventEnd
事件完成的时间节点,此刻用户可以对页面进行操作,也就是 jQuery 中的 domready 时间;
- DOMContentLoaded
:html 文档完全解析完毕的时间节点;
- domComplete
和
- loadEventStart
分别代表 onload 事件触发和结束的时间节点
- loadEventEnd
2.2.2 计算性能指标
可以使用
统计到的时间数据来计算一些页面性能指标,比如 DNS 查询耗时、白屏时间、domready 等等。如下:
- Navigation.timing
2.2.3 Resource timing API
Resource timing API 是用来统计静态资源相关的时间信息,详细的内容请参考。这里我们只介绍
方法,它可以获取页面中每个静态资源的请求,【以百度移动版首页的 logo 为例】如下:
- performance.getEntries
可以看到
返回一个数组,数组的每个元素代表对应的静态资源的信息,比如上图展示的第一个元素对应的资源类型
- performance.getEntries
是图片
- initiatorType
,请求花费的时间就是
- img
的值。
- duration
关于 Resource timing API 的使用场景,感兴趣的同学可以深入研究。
- ;
- (function() {
- handleAddListener('load', getTiming)
- function handleAddListener(type, fn) {
- if(window.addEventListener) {
- window.addEventListener(type, fn)
- } else {
- window.attachEvent('on' + type, fn)
- }
- }
- function getTiming() {
- try {
- var time = performance.timing;
- var timingObj = {};
- var loadTime = (time.loadEventEnd - time.loadEventStart) / 1000;
- if(loadTime < 0) {
- setTimeout(function() {
- getTiming();
- }, 200);
- return;
- }
- timingObj['重定向时间'] = (time.redirectEnd - time.redirectStart) / 1000;
- timingObj['DNS解析时间'] = (time.domainLookupEnd - time.domainLookupStart) / 1000;
- timingObj['TCP完成握手时间'] = (time.connectEnd - time.connectStart) / 1000;
- timingObj['HTTP请求响应完成时间'] = (time.responseEnd - time.requestStart) / 1000;
- timingObj['DOM开始加载前所花费时间'] = (time.responseEnd - time.navigationStart) / 1000;
- timingObj['DOM加载完成时间'] = (time.domComplete - time.domLoading) / 1000;
- timingObj['DOM结构解析完成时间'] = (time.domInteractive - time.domLoading) / 1000;
- timingObj['脚本加载时间'] = (time.domContentLoadedEventEnd - time.domContentLoadedEventStart) / 1000;
- timingObj['onload事件时间'] = (time.loadEventEnd - time.loadEventStart) / 1000;
- timingObj['页面完全加载时间'] = (timingObj['重定向时间'] + timingObj['DNS解析时间'] + timingObj['TCP完成握手时间'] + timingObj['HTTP请求响应完成时间'] + timingObj['DOM结构解析完成时间'] + timingObj['DOM加载完成时间']);
- for(item in timingObj) {
- console.log(item + ":" + timingObj[item] + '毫秒(ms)');
- }
- console.log(performance.timing);
- } catch(e) {
- console.log(timingObj)
- console.log(performance.timing);
- }
- }
- })();
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>
- </title>
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
- />
- <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css"
- />
- <script src="">
- </script>
- <script type="text/javascript" src="">
- </script>
- </head>
- <body>
- </body>
- </html>
来源: http://www.cnblogs.com/libin-1/p/6501951.html