这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
前端监控 SDK 实战
为什么需要前端监控
前端监控通过对页面数据的采集和上报，来帮助开发者更快速的对质量差的页面进行分析与归因。
前端监控监控了什么
- 性能指标
- 异常事件
- 用户行为
前端监控常用性能指标
web性能标准的诞生
早期网页是纯静态的，随着web爆发式发展，2010年8月，W3C成立web性能工作组，目标是指定衡量web应用性能的方法和API，应用到桌面和移动浏览器以及其他环境中，帮助web开发人员评估和理解应用的性能特征。
传统的性能指标
传统的性能指标主要依赖 Navigation Timing 或者 Navigation Timing 2，通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。
以用户为中心的性能指标
传统的性能指标很难反映出用户真正关心的是什么。而以用户为中心的性能指标专注于用户视角下的浏览体验
- 发生了吗? FP（First Paint）：首次渲染的时间点 FCP（First Contentful Paint）：首次有内容渲染的时间点
- 内容有用吗？ FMP（First Meaningful Paint）：首次绘制有意义内容的时间点 SI（Speed Index）：衡量页面可视区域加载速度，帮助检测页面的加载体验差异 LCP（Largest Contentdul Paint）：最大的内容在可视区域内变得可见的时间点，容易理解，给出与FMP相似的结果，容易计算和上报
- 内容可用吗？ TTI（Time to Interactive）：测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。TTI值越小，代表用户可以更早地操作页面，用户体验就更好 TBT（Total Blocking Time）：量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久，一个页面的TBT，是从FCP到TTI之间所有长任务的阻塞时间的总和
- 令人愉悦吗？ FID（First Input Delay）：测量从用户第一次与页面交互直到浏览器对交互做出响应，实际能够开始处理事件时处理程序所经过的时间 CLS（Cumulative Layout Shift）：量化了在页面加载期间，视口中元素的移动程度。例如当我们点击按钮时，突然出现了一块内容，无论是以一种增加意外点击几率的方式加载广告，还是在加载图片时文本向下移动，内容的意外移动都会让人非常不舒服。
前端常见异常
静态资源错误
在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。
请求异常
请求异常=请求响应状态码 >= 400 对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常
JS错误
在页面运行时发生的JS错误会严重影响页面的正常渲染与交互，是前端监控的重点。
白屏异常
此异常没有标准化的监听方法，所以更考验前端监控开发者的功底，通常可以通过判断DOM树的结构来粗略的判断白屏是否发生。
通常导致白屏发生的原因可能有如下几点：
- 发生JS错误导致关键资源渲染失败。
- 请求异常或静态资源加载失败
- 长时间的JS线程繁忙阻塞渲染任务。
