Navigation Timing
Navigation Timing 是一个可以在web中精确测量性能的javascript API。这个API提供了一个简单的方法来获得页面导航、加载事件的精确而又详细的时间状态。目前在 IE9、Chrome、Firefox nightly builds 中可用
浏览器console输入：
> performance
> performance
Performance {timeOrigin: 1589787313623.81, onresourcetimingbufferfull: null, memory: MemoryInfo, navigation: PerformanceNavigation, timing: PerformanceTiming}
memory: MemoryInfo
jsHeapSizeLimit: 4294705152
totalJSHeapSize: 24727288
usedJSHeapSize: 24157764
__proto__: MemoryInfo
navigation: PerformanceNavigation
redirectCount: 0
type: 0
__proto__: PerformanceNavigation
onresourcetimingbufferfull: null
timeOrigin: 1589787313623.81
timing: PerformanceTiming
connectEnd: 1589787313724
connectStart: 1589787313657
domComplete: 1589787317150
domContentLoadedEventEnd: 1589787315183
domContentLoadedEventStart: 1589787315182
domInteractive: 1589787315182
domLoading: 1589787314987
domainLookupEnd: 1589787313657
domainLookupStart: 1589787313648
fetchStart: 1589787313640
loadEventEnd: 1589787317196
loadEventStart: 1589787317150
navigationStart: 1589787313623
redirectEnd: 0
redirectStart: 0
requestStart: 1589787313724
responseEnd: 1589787314993
responseStart: 1589787314962
secureConnectionStart: 1589787313689
unloadEventEnd: 0
unloadEventStart: 0
__proto__: PerformanceTiming
__proto__: Performance
timing 页面事件
每一个performance.timing属性都表示一个页面事件（例如页面发送了请求）或者页面加载（例如当DOM开始加载），测量以毫秒的形式从1970年1月1日的午夜开始。结果为0表示该事件未发生（例如redirectEnd或者redirectStart等）。
navigationStart：
当load/unload动作被触发时，也可能是提示关闭当前文档时（即回车键在url地址栏中按下，页面被再次刷新，submit按钮被点击）。如果当前窗口中没有前一个文档，那么navigationStart的值就是fetchStart。
redirectStart：
它可能是页面重定向时的开始时间（如果存在重定向的话）或者是0。
unloadEventStart：
如果被请求的文档来自于前一个同源（同源策略）的文档，那么该属性存储的是浏览器开始卸载前一个文档的时刻。否则的话（前一个文档非同源或者没有前一个文档），为0。
所谓同源是指，域名，协议，端口相同。
unloadEventEnd：
表示同源的前一个文档卸载完成的时刻。如果前一个文档不存在或者非同源，则为0。
redirectEnd：
如果存在重定向的话，redirectEnd表示最后一次重定向后服务器端response的数据被接收完毕的时间。否则的话就是0。
fetchStart：
fetchStart是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupStart之间，浏览器会检查当前文档的缓存。
domainLookupStart：
这个属性是指当浏览器开始检查当前域名的DNS之前的那一时刻。如果因为任何原因没有去检查DNS（即浏览器使用了缓存，持久连接，或者本地资源），那么它的值等同于fetchStart。
domainLookupEnd：
指浏览器完成DNS检查时的时间。如果DNS没有被检查，那么它的值等同于fetchStart。
connectStart：
当浏览器开始于服务器连接时的时间。如果资源取自缓存（或者服务器由于其他任何原因没有建立连接，例如持久连接），那么它的值等同于domainLookupEnd。
connectEnd：
当浏览器端完成与服务器端建立连接的时刻。如果没有建立连接它的值等同于domainLookupEnd。
secureConnectionStart：
可选。如果页面使用HTTPS，它的值是安全连接握手之前的时刻。如果该属性不可用，则返回undefined。如果该属性可用，但没有使用HTTPS，则返回0。
responseStart：
指客户端收到从服务器端（或缓存、本地资源）响应回的第一个字节的数据的时刻。
responseEnd：
指客户端收到从服务器端（或缓存、本地资源）响应回的最后一个字节的数据的时刻。
domLoading：
这是整个加载进程开始的时间戳。浏览器从这个时间点开始解析收到的HTML页面的第一个字节。
domInteractive：
指文档解析完成的时刻，包括在“传统模式”下被阻塞的通过script标签加载的内容（除了使用defer或者async属性异步加载的情况）。
domContentLoadedEventStart：
当DOMContentLoaded事件触发之前，浏览器完成所有script（包括设置了defer属性但未设置async属性的script）的下载和解析之后的时刻。
domContentLoaded：
标记了DOM准备就绪且没有样式资源阻碍JavaScript执行的时间点，我们可以开始构建渲染树了。
domContentLoadedEventEnd：
当DOMContentLoaded事件完成之后的时刻。它也是javascript类库中DOMready事件触发的时刻。
domComplete：
如果已经没有任何延迟加载的事件（所有图片的加载）阻止load事件发生，浏览器窗口上表示页面还在加载的图标停止旋转，那么该时刻将会将document.readyState属性设置为"complete"，此时刻就是domComplete。
loadEventStart：
该属性返回的是load事件刚刚发生的时刻，如果load事件还没有发生，则返回0。
loadEventEnd：
该属性返回load事件完成之后的时刻。如果load事件未发生，则返回0。
处理流程如下图：
参考资料
https://www.w3.org/TR/navigation-timing/
Kotlin开发者社区
专注分享 Java、 Kotlin、Spring/Spring Boot、MySQL、redis、neo4j、NoSQL、Android、JavaScript、React、Node、函数式编程、编程思想、"高可用，高性能，高实时"大型分布式系统架构设计主题。