这是我参与 [第五届青训营] 伴学笔记创作活动的第10天
在用户使用浏览器时，可能会出现页面加载慢，网页白屏、图像等资源加载失败等等页面质量问题，大大降低了用户的使用体验
使用前端监控体系监控、采集并上报网页数据，复现网页出现的问题，帮助开发者对页面进行分析与归因
以用户为中心的性能指标
- FP：首次渲染时间，刚刚开始渲染第一个像素点
- FCP：首次有内容的渲染时间点，如搜索框等，不过通常与用户无关
- FMP：首次有意义的渲染时间点，如图片、视频、文本段等的占位，但是非标准化，定义不准确
- TTI：页面从开始加载到主要子资源开始渲染，用户可以与页面进行交互了
- SI：可视区域加载速度，是一个过程值，不过指标复杂，难以解释，计算密集不可用于线上监控
- FID：用户首次交互的相应时间
TTI是重要的性能指标，TTI越小，用户可以更早使用网页，体验更好——而下述也是比较重要的性能指标
- LCP：最大内容在可视区的可见时间点，可以让用户尽早看见页面主要内容——LCP更易理解、计算上报、且与FMP相似
- TBT：可以量化主线程繁忙程度——任务在主线程上超过50ms即为长任务，会较明显阻塞渲染。TBT是计算FCP到TTI之间长任务时间的总和
- CLS：页面加载期间，可视元素移动程度，用户使用时内容意外偏移会大大降低用户体验，甚至造成事件误触
异常监控
静态资源错误
拉取资源时发生的错误，如网络异常、地址错误等，会导致图像、视频等资源加载失败
请求异常
请求接口后返回错误状态码，用异步拉取的静态资源也被视作请求异常
状态码为0代表请求取消发送或是无法发送
监控指标为 请求成功率 = 请求成功次数 / 请求总数
JS错误
会监控所有JS错误并上报——页面运行时发生的页面错误会影响渲染和交互
白屏异常
白屏异常往往没有标准化的监控方案，不过通常可以通过DOM树粗略判断白屏发生及原因
需要对白屏发生进行归因，常见原因有：
- JS错误导致关键渲染出错
- 请求异常或静态资源加载失败
