前言: 浏览器提供window.performance获取网页加时的性能, 那统计网页性能时怎样运用performance Api呢?
- 以掘金控制台为例,运行以下代码
const time = window.performance.getEntriesByType('navigation')[0]
得到如下的结果
下面是如何运用上图中的字段得到我们想要监控的网页指标呢?
DNS解析耗时
domainLookupEnd - domainLookupStart
TCP链接耗时
connectEnd - connectStart
SSL安全连接耗时
connectEnd - sourceConnectionStart
网络请求耗时(TTFB)
responseStart - requestStart
数据传输耗时
responseEnd - responceStart
DOM解析耗时
domInteractive - responseEnd
资源加载耗时
loadEventStart - domContentLoadedEventEnd
First Byte时间
responseStart - domainLookupStart
白屏时间
responseEnd - fetchStart
首次可交互时间
domInteractive - fetchStart
Dom Ready时间
domContentLoadEventEnd - fetchStart
页面完全加载时间
loadEventStart - fetchStart
http头部大小
transferSize - encodedBodySize
重定向次数
perFormance.navigation.redirectCount
重定向耗时
redirectEnd - redirectStart