Performance API应用于页面性能检测

1. Performance API

Web technology for developers > Web APIs > Performance API
MDN web docs——Performance API(翻译)

performance.timing的key	意义
navigationStart	当前浏览器窗口的前一个网页关闭，发生unload事件时的时间戳。如果没有前一个网页，就等于fetchStart
unloadEventStart	如果前一个网页与当前网页属于同一个域下，则表示前一个网页的unload事件发生时的时间戳。如果没有前一个网页，或者之前的网页跳转不是属于同一个域内，则返回值为0。
unloadEventEnd	如果前一个网页与当前网页属于同一个域下，则表示前一个网页的unload回调结束时的时间戳。如果没有前一个网页，或者之前的网页跳转不是属于同一个域内，则返回值为0。
fetchStart	浏览器准备通过HTTP请求去获取页面的时间戳。在检查应用缓存之前发生。
domainLookupStart	域名查询开始时的时间戳。如果使用持久连接，或者从本地缓存获取信息的，等同于fetchStart
domainLookupEnd	域名查询结束时的时间戳。如果使用持久连接，或者从本地缓存获取信息的，等同于fetchStart
connnectStart	HTTP请求开始向服务器发送时的时间戳
secureConnectionStart	浏览器与服务器开始安全链接的握手时的时间戳。如果当前网页不要求安全连接，则返回0。
connnectEnd	浏览器与服务器之间的连接建立时的时间戳，连接建立指的是所有握手和认证过程全部结束
requestStart	浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的时间戳
responseStart	浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳
responseEnd	浏览器从服务器收到（或从本地缓存读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的时间戳
domLoading	当前网页DOM结构开始解析时,也就是Document.readyState属性变为“loading”、并且相应的readystatechange事件触发时的时间戳。
domInteractive	DOM构建完毕， 图片、样式表等外部资源可能还未下载完毕，也就是Document.readyState属性变为“interactive”、并且相应的readystatechange事件触发时的时间戳。与DomContentLoaded事件可以认为同时发生
domContentLoadedEventStart	当前网页DOMContentLoaded事件发生时，也就是DOM构建完毕， 图片、样式表等外部资源可能还未下载完毕
domContentLoadedEventEnd	当前网页DOMContentLoaded事件发生时，也就是DOM构建完毕， 图片、样式表等外部资源可能还未下载完毕
domComplete	当前网页DOM结构生成时，也就是Document.readyState属性变为“complete”,并且相应的readystatechange事件触发时的时间戳。页面所有资源加载完毕，表示load事件将被触发
loadEventStart	当前网页load事件的回调函数开始时的时间戳。如果该事件还没有发生，返回0。页面所有资源加载完毕
loadEventEnd	当前网页load事件的回调函数结束时的时间戳。如果该事件还没有发生，返回0。页面所有资源加载完毕

2. DOM生命周期^[1]

readyState:loading, interactive, complete
event: readyStateChange, contentLoaded, load, beforeunload, unload

readyState(loading)
readyState(interactive)
DOMContentLoaded DOM树构建完毕，内嵌资源可能还未下载完毕
readyState (complete)
load 附加资源加载完毕，包括图片资源

---

1. 页面生命周期：DOMContentLoaded, load, beforeunload, unload ↩