这是我参与「第五届青训营」伴学笔记创作活动的第13天
课程概要
一、为什么我们要聊前端监控
二、前端监控之常用性能指标
三、前端监控之前端常见异常
四、监控前端性能与异常
前端监控SDK
一、为什么我们要聊前端监控
（一）、什么是前端监控
（二）、为什么需要前端监控 ：
复现问题 归因 1.缩短用户感知等待时间，流量增加 2.用户转化率，留存量提升 3.性能不佳会失去用户
（三）、前端监控到底监控了什么
- 性能指标
- 异常事件
- 用户行为
二、前端监控之常用性能指标
（一）、web性能标准的诞生
1.
2.传统性能指标
3.衍生提出以用户为中心的性能指标
传统的性能指标专注于容易衡量的技术细节，但是很难反映出用户所真正关心的是什么，如果仅仅是把加载速度优化的更快，会发现网站的用户体验依然很差。 这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验。
（二）、以用户为中心的性能指标
1.FP、FCP、FMP
2.SI
监控难度高，需要更高的技术监控
3.FID
用户与页面交互的指标
用户点击到使用的指标
LCP：最大的内容在可视区域变得可见的时间点
优点： 1.容易理解 2.给出与FMP相似的结果 3.容易计算与上报
5.TBT 量化主线程繁忙程度
6.CLS（重要）
量化页面加载适口的程度
三、前端监控之前端常见异常
- 静态资源错误
静态资源错误
图像加载失误
资源地址未找到
- 请求异常
状态码0是什么
-
Js错误
-
白屏异常
监听到白屏发生后，我们还需要对白屏的发生进行归因
通常导致白屏发生的原因可能有如下几点：
1.发生Js错误导致关键资源渲染失败 2.请求异常或静态资源加载失败 3.长时间的Js线程繁忙阻塞渲染任务
四、监控前端性能与异常
以显要指标为主
利用 developer.mozilla.org/zh-CN/docs/…. 和 developer.mozilla.org/zh-CN/docs/…. 可以监控到一些标准的渲染性能数据
