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 附加资源加载完毕，包括图片资源
