网页性能监控关键指标的计算

309 阅读1分钟

前言: 浏览器提供window.performance获取网页加时的性能, 那统计网页性能时怎样运用performance Api呢?

  • 以掘金控制台为例,运行以下代码
const time = window.performance.getEntriesByType('navigation')[0]

得到如下的结果

image.png

下面是如何运用上图中的字段得到我们想要监控的网页指标呢?

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