这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
前端监控作用
前端监控通过对页面数据的采集和上报,来帮助开发者更快速地对质量差的页面进行分析与归因
性能不佳会对业务目标产生负面影响
前端监控范围
性能指标:以用户为中心的性能指标
FP(First Paint):首次渲染的时间点。FP时间点之前,用户看到的都是没有任何内容的白色屏幕
FCP(First Contentful Paint):首次有内容渲染的时间点
FMP(First Meaningful Paint):首次绘制有意义内容的时间点
SI(Speed Index):衡量页面可视区域加载速度,帮助检测页面的加载体验差异
FID(First Input Delay):测量从用户第一次与页面交互直到浏览器对交互作出响应,实际能够开始处理事件时处理程序所经过的时间
LCP(Largest Contentful Paint):最大的内容在可视区域变得可见的时间点。优点是容易理解;给出与FMP相似的结果;容易计算和上报
TBT(Total Blocking Time):量化主线程在空闲之前的繁忙程度,有助于理解在加载期间,页面无法响应用户输入的时间有多久。一个页面的TBT,是从FCP到TTI之间所有长任务的阻塞时间的总和
CLS(Cumulative Layout Shift):量化了在页面加载期间,视口中元素的移动程度
异常事件
静态资源错误:在拉取和加载静态资源的过程中发生了预期之外的错误,如网络异常等,导致静态资源无法正常渲染到页面上
请求异常 = 请求响状态码 >= 400。对于通过异步请求拉去的静态资源错误也可选择归纳到请求异常
请求成功率 = 请求成功数 / (请求成功数 + 请求失败数)