这是我参加【第五届青训营】笔记创作活动的第10天
一、为什么需要前端监控
前端监控通过对页面数据的采集和上报,来帮助开发者更快速地对质量差的页面进行分析与归因。
二、前端监控性能指标
- 传统的性能指标
传统的性能指标主要依赖Navigation Timing或者Navigation Timing 2，通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。
- 用户为中心的性能
传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么。如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差。
这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验。
FP (First Paint):首次渲染的时间点。FP时间点之前，用户看到的都是没有任何内容的白色屏幕。
FCP (First Contentful Paint):首次有内容渲染的时间点。FMP (First Meaningful Paint):首次绘制有意义内容的时间点。
TTI(Time to Interactive):测量页面从开始加载到主要子资源完成渲染,并能够快速、可靠地响应用户输入所需的时间。
TTI反映页面可用性的重要指标。TTI值越小,代表用户可以更早地操作页面，用户体验就更好。
sI(Speed Index):衡量页面可视区域加载速度,帮助检测页面的加载体验差异.
A和B的首次内容出现和完全加载时间是一样的，但是从用户角度A的体验明显更好。
FID (First Input Delay):测量从用户第一次与页面交互(比如当他们单击链接、点按按钮等等)直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间
TBT (Total Blocking Time):量化主线程在空闲之前的繁忙程度,有助于理解在加载期间，页面无法响应用户输入的时间有多久。
长任务:如果一个任务在主线程上运行超过50毫秒，那么它就是长任务。超过50ms后的任务耗时，都算作任务的阻塞时间。
一个页面的TBT，是从 FCP 到TTI之间所有长任务的阻塞时间的总和。
CLS (Cumulative Layout Shift):量化了在页面加载期间，视口中元素的移动程度。
三、前端监控常见异常
静态资源:加载页面所需的html、css和js 等文件，以及其他各类多媒体文件，如图片、音频和视频等。
静态资源错误:在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。
Http请求状态码分类
100 - 199---------->信息响应
200 - 299 --------->成功响应
300 - 399---------->重定向消息
400 - 499 --------->客户端错误响应
500 - 599 --------->服务端错误响应
请求异常=请求响应状态码>= 400
对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常
