页面性能采集分析
如果需要获取页面性能相关的指标的话，可以借助 js 中的内置对象 Performance 。它提供了与浏览器性能相关的信息和方法，用于度量和监测网页加载和执行的性能。
通过performance.timing
performance.timing：提供了与页面导航相关的时间戳信息，例如页面开始加载、DOM解析完成、资源加载完成等。
通过 window.performance 可以访问到 "Performance" 对象。"Performance" 对象包含各种属性和方法，可以使用performance.timing 获取 PerformanceTiming 对象，PerformanceTiming 是 W3C 定义的在导航期间测量、记录和报告网页性能的 API，它包含了在页面加载期间发生的所有关键事件的时间戳，我们可以了解网页的载入时间，服务器等待时间，DNS 查询时间，页面渲染时间等，帮助我们分析网页性能，并实现性能优化，包括以下属性(部分)：
`navigationStart`：浏览器开始导航的时间戳。
`unloadEventStart`：当前文档 unload 事件开始的时间戳。
`unloadEventEnd`：前一个文档 unload 事件结束的时间戳。
`redirectStart`：第一个 HTTP 重定向开始时的时间戳。
`redirectEnd`：最后一个重定向结束时的时间戳。
`fetchStart`：浏览器发起第一个 HTTP 请求的时间戳。
`domainLookupStart`：域名解析开始时的时间戳。
`domainLookupEnd`：域名解析结束时的时间戳。
`connectStart`：浏览器开始向服务器建立连接时的时间戳。
`connectEnd`：浏览器成功建立连接时的时间戳。
`secureConnectionStart`：安全连接建立开始的时间戳。
`requestStart`：浏览器开始发送第一个 HTTP 请求时的时间戳。
`responseStart`：浏览器接收到第一个字节时的时间戳。
`responseEnd`：浏览器接收到最后一个字节时的时间戳。
`domLoading`：浏览器正在解析 HTML 文档时的时间戳。
`domInteractive`：HTML 文档解析完成，DOM 树构建完成的时间戳。
`domContentLoadedEventStart`：DOMContentLoaded 事件开始时的时间戳。
`domContentLoadedEventEnd`：DOMContentLoaded 事件结束时的时间戳。
`domComplete`：文档解析完成并且所有资源都已准备好加载时的时间戳。
`loadEventStart`：load 事件开始时的时间戳。
`loadEventEnd`：load 事件结束时的时间戳。
通过performance.getEntriesByType(navigation)
performance.getEntriesByType(type)：可以通过该方法在浏览器中获取性能条目。
-
参数
type：表示要获取的性能条目类型，可传入navigation或resource参数'navigation'：获取所有导航相关的性能条目。
关于计算页面完全加载时间，白屏时间等
FP: responseEnd - fetchStart, // 白屏时间
TTI: domInteractive - fetchStart, // 首次可交互时间
DomReady: domContentLoadedEventEnd - fetchStart, // HTML加载完成时间也就是 DOM Ready 时间。
Load: loadEventStart - fetchStart, // 页面完全加载时间
DNS: domainLookupEnd - domainLookupStart, // DNS查询耗时
TCP: connectEnd - connectStart, // TCP连接耗时
TTFB: responseStart - requestStart, // 请求响应耗时
Trans: responseEnd - responseStart, // 内容传输耗时
DomParse: domInteractive - responseEnd, // DOM解析耗时
Res: loadEventStart - domContentLoadedEventEnd, // 资源加载耗时
