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

什么是前端监控

前端监控是尽可能采集从用户在浏览器中输入URL到页面展示以及后续用户交互中产出的性能指标与发生的异常事件并且上报到平台完成消费

前端监控解决的常见问题

• 网页打开很慢--页面故那件资源渲染很慢
• 网页很卡--页面同步计算量很多，阻塞渲染
• 网页中图片全部裂开--客户端的网络状态很差，上有节点服务异常
• 网页加载完之后页面是空白的--页面脚本执行失败，关键资源加载失败，请求失败

前端监控通过对页面数据的采集与上报，来帮助开发者更快地对质量差的页面进行分析与归因。

前端监控的具体内容

• 性能指标
• 异常事件
• 用户行为

以用户为中心的性能指标

• FP：首次渲染时间点，FP之前用户看到的网页是白色屏幕
• FCP：首次有内容的时间点
• FMP：首次绘制有意义内容的时间点
• TTI：测量页面从开始加载到主要子资源完成渲染，TTI的值越小，页面的性能指标越好，可以更快地与用户进行交互。

LCP

最大内容在可见区域内变得可见的时间点

LCP优点

• 容易理解
• 给出与FMP相似的结果
• 容易计算与上报

各个指标性能对比

CLS

量化了页面在加载期间，视口中元素移动程度，CLS越小越好。

前端监控异常

静态资源错误

在拉取静态资源的时候，出现预期之外的错误。

请求异常

Http状态码

• 100-199：信息响应
• 200-299：信息响应成功
• 300-399：重定向消息
• 400-499：客户端错误
• 500-599：服务端错误 请求异常=请求状态码>=400