这是我参与「第四届青训营 」笔记创作活动的的第 15 天。

前言

前端监控：指的是通过一定的手段来获取用户行为以及跟踪产品在客户端的运行情况，并以监控数据为基础，能够更快的发现问题和解决问题，并且可以作为产品的决策依据，优化升级迭代产品，为业务扩展提供更多可能性，提升用户使用体验。

系列文章：

前端常见异常及捕获方法

前端监控之埋点及数据上报

常见数据指标

页面性能数据

官方地址：Navigation Timing Level 2 (w3.org)

图中的指标解读可以查看：PerformanceTiming - Web API 接口参考 | MDN (mozilla.org)

获取 PerformanceTiming

优先选择 W3C Level2 的 PerformanceNavigationTiming，使用了High-Resolution Time，时间精度可以达毫秒的小数点好几位，当浏览器不支持该API时，可以选择 W3C Level1 的 PerformanceTiming，目前兼容性不错，但是未来可能被废弃。

let timing = performance.getEntriesByType('navigation').length > 0 ?
                performance.getEntriesByType('navigation')[0] : performance.timing;

页面加载各个阶段指标

指标	意义	计算方式	备注
FP	白屏时间	responseEnd - fetchStart	从请求开始到浏览器开始解析第一份HTML文档的耗时
unload	上一个页面卸载耗时	unloadEventEnd – unloadEventStart
redirect	重定向耗时	redirectEnd – redirectStart
appCache	读取缓存耗时	domainLookupStart – fetchStart
DNS	DNS 解析耗时	domainLookupEnd – domainLookupStart	如果使用长连接或本地缓存，则数值为0
TCP	TCP 连接耗时	connectEnd – connectStart	建立TCP连接的耗时，如果使用长连接或本地缓存，则数值为0
SSL	SSL 安全连接	connectEnd - secureConnectionStart	只在HTTPS下有效
TTFB（Time to First Byte）	网络请求耗时	responseStart – requestStart	发出页面请求到接收到应答数据第一个字节所花费的毫秒数
response	响应数据传输耗时	responseEnd – responseStart
DOM	DOM 解析耗时	domInteractive – responseEnd
DOMContentLoaded	DOMContentLoaded 事件耗时	domContentLoadedEventEnd – domContentLoadedEventStart	当 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，不用等待CSS、图片等完成加载
resources	资源加载耗时	domComplete – domContentLoadedEventEnd
onLoad	onLoad 事件耗时	loadEventEnd – loadEventStart
页面完全加载时间	页面完全加载时间	loadEventStart - fetchStart

DOM 加载相关指标

DOM文档加载步骤：

1. 解析HTML文件
2. 加载外部脚本和样式表文件
3. 解析并执行脚本代码
4. 构建DOM模型（DOMContentLoaded执行）
5. 加载图片等资源
6. 页面加载完毕（触发load事件）

FP

FP(first-paint)：从页面加载开始到第一个像素绘制到屏幕上的时间。

const fp = performance.getEntries('paint').filter(entry => entry.name == 'first-paint')[0].startTime;

FCP

FCP(first-contentful-paint)，从页面加载开始到页面内容的任一部分在屏幕上完成渲染的时间。对于该指标，"内容" 指的是文本、图像（包括背景图像）、<svg>元素或非白色的<canvas>元素。

const fcp = performance.getEntries('paint').filter(entry => entry.name == 'first-contentful-paint')[0].startTime;

LCP

LCP(largest-contentful-paint)，从页面加载开始到最大文本块或图像元素在屏幕上完成渲染的时间。

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});