Navigation Timing API

window.performance.timing

参数介绍

标题
navigationStart	从同一个浏览器上下文的上一个文档卸载（unload）结束时的UNIX时间戳。如果没有上一个文档，这个值会和fetchStart相同
unloadEventStart	unload事件抛出的UNIX时间戳。如果没有上一个文档，这个值会返回0
unloadEventEnd	unload事件处理完成时的UNIX时间戳。如果没有上一个文档，这个值会返回0
redirectStart	第一个HTTP重定向开始时的UNIX时间戳
redirectEnd	最后一个HTTP重定向完成时（HTTP响应的最后一个比特直接被收到的时间）
fetchStart	浏览器准备好使用HTTP请求来获取（fetch）文档的时间。这个时间点会在检查任何应用缓存之前
domainLookupStart	域名查找开始的时间，如果使用了keep alive，或者这个消息存储到了缓存或者本地资源上，这个值和fetchStart一致
domainLookupEnd	域名查询结束的时间
connectStart	HTTP请求开始向服务器发送时的时间
connectEnd	返回浏览器和服务器之间的连接建立时的时间，如果建立的是持久连接，则返回值等于fetchStart。连接建立指的是所有握手和认证过程全部结束。
secureConnectionStart	返回浏览器和服务器开始安全链接的握手时的时间
requestStart	浏览器向服务器发出HTTP请求的时间（或开始读取本地缓存的时间）
responseEnd	浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时的时间戳
domLoading	返回当前网页DOM结构开始解析时，及document.readyState属性变成“loading”，相应的“readystatechange”事件触发的时间戳
domInteractive	返回当前网页DOM结构结束解析、开始加载内嵌资源时 （即document.readyState属性变为“interactive”）
domContentLoadedEventStart	返回当解析器发送DOMContentLoaded事件，即所有需要被执行的脚本已经被解析时的时间戳
domContentLoadedEventEnd	返回所有需要立即执行的脚本已经被执行时的时间戳
domComplete	返回当前文本被解析完成
loadEventStart	返回该文档下，load事件被发送
loadEventEnd	返回当load事件结束，即加载完成时

使用实例

'计算页面加载所需的总时长'
var perfData = window.performance.timing;
var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
 
'DNS解析时间:', timing.domainLookupEnd - timing.domainLookupStart, 
'TCP建立时间:', timing.connectEnd - timing.connectStart, 
'首屏时间:', timing.responseStart - timing.navigationStart,
'dom渲染完成时间:', timing.domContentLoadedEventEnd-timing.navigationStart, 
'页面onload时间:', timing.loadEventEnd-timing.navigationStart,
'domload时间:',timing.domComplete-timing.domLoading,
'事件绑定时间:',timing.loadEventEnd-timing.loadEventStart;