这是我参与「第五届青训营」伴学笔记创作活动的第11天。
一、笔记
性能指标
以用户为中心的性能指标：用户体验
FP（First Paint)首次渲染时间点，FP之前是白屏
FCP(First Contentful Paint)首次有内容渲染的时间点
FMP（First Meaningful Paint)首次绘制有意义内容的时间点
TTI（Time to Interactive)测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间，反映页面可用性的重要指标。越小，体验越好
SI（Speed Index)衡量页面可视区域加载速度，帮助检测页面的加载体验差异
FID（First Input Delay）测量从用户第一次与页面交互直到浏览器对交互信息作出响应，实际能够开始处理事件时处理程序所经过的时间
LCP（Largest Contentful Paint）最大内容在可视区域内变得可见的时间点，最大的元素，容易理解、给出与FMP相似的结果，容易计算和上报
TBT（Total Blocking Time）量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久；长任务
CLS（Cumulative Layout Shift）量化了页面加载期间，视口中元素的移动程度
常见异常
- 静态资源错误：在拉取和加载静态资源的过程中发生了预期之外的错误，导致无法加载
- 请求异常：http请求响应状态码>=400，异步拉取的静态资源也属于请求异常；状态码0；请求成功率
- JS错误
- 白屏异常：没有标准化的监听方法，可以通过判断DOM树来判断
原因：
1.发生JS错误导致关键资源渲染失败
2.请求异常或静态资源加载失败
3.长时间的JS线程繁忙阻塞渲染任务
监控实战
Performance和PerformanceObserver监控一些标准的渲染性能数据
window.addEventListener的error和unhandledrejection监控到全局的js错误，用type区分
window.addEventListener的error事件可以监测到静态资源错误，和js错误进行区分
XMLHttpRequest
数据上报
请求函数Navigator.sendBeacon()
例：封装一个完整的sdk
慢请求
Performance Resource Timing获取慢请求
