Naiviation timeing API 时间统计

用于 web 应用 获取浏览器的相关时间信息。

performanceTiming 接口

navigationStart

• 由上一个页面跳入当前页，返回上一个页面的 unload 时刻
• 没有上一个页面 当前页面的第一个请求开始的时刻

unloadEventStart

如果上一个页面与当前页面同域，返回上一个页面的 unload 事件触发的时刻，如果没有上一个页面，或者上一个页面不是同域的，返回 0。

unloadEventEnd

上一个同源页面的 unload 事件响应结束时间，非同源或没有上一个页面则返回 0 。

redirectStart

由同源页面定位过来的页面，返回重定向开始的时间，反之为0。

redirectEnd

由同源页面定位过来的页面，返回最后一次接收重定向响应的时间，反之为0。

domainLookupStart

返回用户代理域名查询的前的时间点。如果页面从现有的链接或者从缓存中加载，这个属性返回与请求开始相同的时间

domainLookupEnd

返回用户代理域名查询的前的时间点。如果页面从现有的链接或者从缓存中加载，这个属性返回与请求开始相同的时间。

如果域名 dns 解析被缓存，domainLookupStart domainLookupEnd 代表了从本地缓存中获取的时间。

connectStart

浏览器建立首次链接请求的时刻。如果页面从缓存中加载，则返回与 domainLookupEnd 相等的时刻。

connectEnd

浏览器完成首次链接请求的时刻。如果页面从缓存中加载，则返回与 domainLookupEnd 相等的时刻。这部分时间包括 SSL 握手，和 Socks 认证的时间。

如果连接失败用户代理重新连接，connectStart， connectEnd 返回新的连接时刻点。

secureConnectionStart

如果当前页面使用的是 https 请求，返回用户代理开始建立连接的时刻。否则返回 0。

requestStart

请求读取文档开始的时间（完成建立连接），包括从本地读取缓存。如果请求失败，requestStart 返回新的请求的时间。

responseStart

用户代理接收到服务器的响应的时刻， 或从缓存中读取的时刻。

responseEnd

用户代理完成接收服务器响应的时刻或者请求链接关闭的时刻，

domLoading

返回 document.readiness 状态被置为 loading 的时刻。

document readyState
loading: 文档正在被加载
interactive: 完成解析并在加载引用资源
complete: 完成引用资源全部加载完成。
使用事件 readyStateChange 接收两次 第一次 interactive 触发 第二次 complete 触发。

domInteractive

返回 document.readiness 状态被置为 interactive 的时刻。

domComplete

返回 document readyState 状态被设置为 complete 的时间。

domContentLoadedEventStart

返回触发 DOMContentLoaded 即将触发的时刻，此时页面中所有的 script 标签已经被执行。

domContentLoadedEventEnd

返回 DOMContentLoaded 事件处理完成的时间。

loadEventStart

返回 load 事件触发的时刻。

loadEventEnd

返回 load 事件完成的时间。

performance.timing 主要时间计算

image.png

1. DNS查询耗时
   domainLookupEnd - domainLookupStart
2. js css 资源 加载时间：
   domInteractive - domComplete
3. js css 资源 解析时间：
   domContentLoadedEventStart - domComplete
4. domReady
   domContentLoadedEventEnd - navigationStart

performance.navigation

type

值	含义
0	链接跳入
1	刷新打开
2	后退
255	其他

redirectCount

从上一次非重定向开始到当前页面的重定向次数。

参考：

w3c 标准