解读Performance API

window.performance 对象了解一下~

Performance API允许网页访问某些函数来测量网页和Web应用程序的性能。
通俗地说,从浏览器输入网址并开始访问的那一刻起,所有性能相关的数据被记录。

方法

Performance 采用高分辨率时间数据,具体看一下两个方法:
– performance.now() : 返回一个DOMHighResTimeStamp值。
– performance.mark(name) : 以name为键名,记录一个DOMHighResTimeStamp值。
DOMHighResTimeStamp 是一个double类型,用于存储时间值。该值可以是离散的时间点或两个离散时间点之间的时间差。T单位为毫秒 ms (milliseconds) ,应准确至5微秒 µs (microseconds)。但是,如果浏览器无法提供准确到5微秒的时间值(例如,由于硬件或软件的限制), 浏览器可以以毫秒为单位的精确到毫秒的时间表示该值。

属性

  • performance.timing :是一个PerformanceTiming 对象,包含延迟相关的性能信息。
  • performance.navigation :是一个 PerformanceNavigation 对象,该对象表示在当前给定浏览上下文中网页导航的类型(分别是:网页跳转 – TYPE_NAVIGATE (0), 网页重载 – TYPE_RELOAD (1), 网页前进或后退 – TYPE_BACK_FORWARD (2), 保留状态 – TYPE_RESERVED (255))以及重定向次数(仅支持检测同源的重定向)。

通俗讲,navigation确定了页面导航的状态,而timing记录了一些列时间点。

具体输出举例:

performance.navigation
/* 
  {  
      type: 1,         // 导航类型
      redirectCount: 0 // 重定向次数
  }
*/

performance.timing
/*
connectEnd:1523629115426
connectStart:1523629115426
domComplete:1523629115584
domContentLoadedEventEnd:1523629115525
domContentLoadedEventStart:1523629115525
domInteractive:1523629115525
domLoading:1523629115439
domainLookupEnd:1523629115426
domainLookupStart:1523629115426
fetchStart:1523629115426
loadEventEnd:1523629115584
loadEventStart:1523629115584
navigationStart:1523629115409
redirectEnd:0
redirectStart:0
requestStart:1523629115426
responseEnd:1523629115431
responseStart:1523629115426
secureConnectionStart:0
unloadEventEnd:1523629115431
unloadEventStart:1523629115431
*/

网页载入图谱

通过一张图,可以完整地看到网页性能监控的主要记录过程:

以下按触发顺序进行描述:
– navigationStart:在同一个浏览器上下文中,前一个网页(与当前页面不一定同域)unload 的时间戳,如果无前一个网页 unload ,则与 fetchStart 值相等
– unloadEventStart:前一个网页(与当前页面同域)unload 的时间戳,如果无前一个网页 unload 或者前一个网页与当前页面不同域,则值为 0
– unloadEventEnd:和 unloadEventStart 相对应,返回前一个网页 unload 事件绑定的回调函数执行完毕的时间戳
– redirectStart:第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算,否则值为 0
– redirectEnd:最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内的重定向才算,否则值为 0
– fetchStart:浏览器准备好使用 HTTP 请求抓取文档的时间,这发生在检查本地缓存之前
– domainLookupStart:DNS 域名查询开始的时间,如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等
– domainLookupEnd:DNS 域名查询完成的时间,如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等
– connectStart:HTTP(TCP) 开始建立连接的时间,如果是持久连接,则与 fetchStart 值相等,如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接开始的时间
– connectEnd:HTTP(TCP) 完成建立连接的时间(完成握手),如果是持久连接,则与 fetchStart 值相等,如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接完成的时间

在此之后,握手结束。

  • secureConnectionStart:HTTPS 连接开始的时间,如果不是安全连接,则值为 0
  • requestStart:HTTP 请求读取真实文档开始的时间(完成建立连接),包括从本地读取缓存,连接错误重连时,这里显示的也是新建立连接的时间
  • responseStart:HTTP 开始接收响应的时间(获取到第一个字节),包括从本地读取缓存
  • responseEnd:HTTP 响应全部接收完成的时间(获取到最后一个字节),包括从本地读取缓存
  • domLoading:开始解析渲染 DOM 树的时间,此时 Document.readyState 变为 loading,并将抛出 readystatechange 相关事件
  • domInteractive:完成解析 DOM 树的时间,Document.readyState 变为 interactive,并将抛出 readystatechange 相关事件

此时,DOM的加载已经完成,但根据设计,会触发DOM加载完成的事件

  • domContentLoadedEventStart:DOM 解析完成后,网页内资源加载开始的时间,文档发生 DOMContentLoaded事件的时间
  • domContentLoadedEventEnd:DOM 解析完成后,网页内资源加载完成的时间(如 JS 脚本加载执行完毕),文档的DOMContentLoaded 事件的结束时间
  • domComplete:DOM 树解析完成,且资源也准备就绪的时间,Document.readyState 变为 complete,并将抛出 readystatechange 相关事件
  • loadEventStart:load 事件发送给文档,也即 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

兼容性

以上提到的,除了PC端的IE6-10不支持,主流的PC、移动端浏览器都支持。

参考

MDN-Performance对象
W3C Draft
Performance兼容性

发表评论

电子邮件地址不会被公开。 必填项已用*标注