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

课程笔记

什么是前端监控

• 即尽可能的采集这一过程以及后续用户交互中产出的性能指标与发送的异常事件并上报到平台完成消费

为什么需要前监控

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

前端监控之常用的性能指标

• 传统的性能指标依赖Navigation Timing或者Navigation Timing2，通过记录一个文档从发起请求到加载完毕的各阶段性能消耗时，以加载速度来衡量性能

• 以用户为中心的性能指标

• 传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么，仅仅是把加载速度优化更快，也是不行的，用户体验仍然很差，这就是为什么以用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验

用户性能指标

1. FP(First Paint)：首次渲染的时间点，FP时间点之前，用户看到的都是没有任何内容的白色屏幕
2. FCP(First Contentful Paint)：首次有内容渲染的时间点
3. FMP(First Meaningful Paint)：首次绘制有意义内容的时间点
4. TTI(Time to Interaactive)：测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠响应用户输入所需时间

前端监控之常见异常

1. 静态资源错误：在拉取和加载静态资源页面的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法渲染到正常页面上

2. 白屏异常：通过DOM树来判断，有以下几个原因

   • 发生JS错误导致
   • 请求异常或资源加载失败
   • 长时间的JS线程繁忙阻塞渲染任务