Navigation Timing API & Resource Timing API 学习

[imfenghuang]

Navigation Timing API & Resource Timing API 学习

Navigation Timing API

Navigation Timing API 示意图

使用 performance.timing 来获取一个 timing 相关的对象，这个对象是只读的。

• 指标解释
  navigationStart：浏览器上一个文档卸载结束时的时间戳，如果没有上一个文档，这个值和 fetchStart 相同；
  unloadEventStart：浏览器unload事件开始时的时间戳，如果没有上一个文档，或者前一个文档与当前文档不同域，则为0；
  unloadEventEnd：和 unloadEventStart 相对应，表示 unload 事件处理完成的时间戳；
  redirectStart：第一个 HTTP 重定向发生的时间，有跳转且同域，否则为0；
  redirectEnd：最后一个 HTTP 重定向完成的时间，有跳转且同域，否则为0；
  fetchStart：浏览器准备好使用HTTP来抓取网页的时间，之后检查本地缓存；
  domainLookupStart：DNS查询开始时间，如果使用了本地缓存，则与 fetchStart 值相同；
  domainLookupEnd：DNS查询结束时间，如果使用了本地缓存，则与 fetchStart 值相同；
  connectStart：开始向服务器发送TCP建连请求的时间，如果是持久连接，则与 fetchStart 值相同；
  connectEnd：完成TCP建连请求的时间，如果是持久连接，则与 fetchStart值相同；secureConnectionStart：HTTPS连接开始的时间，如果是非安全（非HTTPS）连接，则为0； requestStart：HTTP请求读取文档或读取本地缓存的开始时间； responseStart：HTTP获取到首字节的时间； responseEnd：HTTP获取完所有文档的时间； domLoading：开始解析DOM树的时间，此时，document.readyState值为loading，readystatechange对应的事件触发；domInteractive：DOM解析完成的时间，此时，document.readyState值为interactive，readystatechange对应的事件触发；domContentLoadedEventStart：返回当解析器发送 DOMContentLoaded事件，即所有需要被执行的脚本已经被解析时的时间戳；domContentLoadedEventEnd：返回当所有需要立即执行的脚本已经被执行（不论执行顺序）时的时间戳； domComplete：返回当前文档解析完成，即 Document.readyState变为complete且相对应的 readystatechange被触发时的时间戳；loadEventStart：load事件触发时的时间戳；loadEventEnd：load` 事件完成时的时间戳。

• API 利用
  通过上面的指标，可以通过简单计算，获取我们认为重要的数据进行上报，比如：页面加载完成时间：loadEvent – navigationStart；DOM解析时间：domComplete – responseEnd；等。DOM解析时间如果过长，就需要考虑我们的页面是否HTML结构层级嵌套过多了。

当然，我们还关注一些其他的性能指标，如白屏，首屏，这些指标该怎么计算得出呢？对于白屏时间，chrome 提供了 window.chrome.loadTimes().firstPaintTime 属性，通过绘制第一帧的时间，减去文档开始的时间，就可以得出白屏时间；IE提供了 window.performance.timing.msFirstPaint 来获取绘制第一帧的时间。

对于首屏时间，则相对复杂一些，听云采用首屏高度内图片加载法获取首屏时间，通过寻找首屏区域内的所有图片，计算它们加载完的时间去得到首屏时间，这样比较符合网页的实际体验并且比较节省设备运行资源。

Resource Timing API

Resource Timing API示意图

使用 performance.getEntries() 获取所有资源请求的时间数据。与 performance.timing 相比新增了name，entryType，initiatorType，duration等属性。其中 name 是资源的绝对路径；entryType 是资源的类型，如 resource，paint 等；initiatorType 是谁发起的请求，如 link 是 link 标签发起的，img 表示 img 标签发起的，css 表示该资源在 css 样式表内调用；duration表示资源加载耗时。