前端与前端监控SDK实战 | 青训营笔记 这是我参与第五届青训营伴学笔记创作活动的第十一天
一、前端监控是什么 前端监控就是尽可能的采集这一过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费 二、监控页面质量为什么那么重要 1.图片社交分享网站将感知等待时间减少了40%，这将搜索引擎流量和注册量增加了15%
2.cook（冷冻速食订购网站）将页面平均加载时间减少了850毫秒，从而将转化次数提高了7%，将跳出率降低了7%，并将每个会话的页面增加了10%
三、前端监控重要指标
1.可交互性 （1）卡顿监控 （2）请求性能
2.服务稳定性 请求成功率
3.加载速度 首屏性能
4.可用性 （1）渲染错误/白屏 （2）请求错误 （3）JS错误 （4)静态资源错误
5.业务数据 （1）pv/uv （2）自定义事件/打点
四、前端监控之常用性能指标
1.传统性能指标主要依赖Navigation Timing 或者Navigation Timing 2,通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能
2.以用户为中心的性能指标 （1）FP：首次渲染的时间点。FP时间点之前，用户看到的都是没有任何内容的白色屏幕
（2）FCP:首次有内容渲染的时间点
（3）FMP：首次绘制有意义内容的时间点
（4）TTI:测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间 TTI反映页面可用性的重要指标。TTL值越小，代表用户可以更早地操作页面，用户体验就更好
（5）SI：衡量页面可视区域加载速度，帮助检测页面的加载体验差异
（6）FID：测量从用户第一次与页面交互（比如当他们单击连接、点按按钮等等）直到浏览器对交互作出响应，实际能够开始处理程序所经过的时间
（7）LCP:最大的内容在可视区域内变得可见的时间点
（8）TBT:量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久
（9）CLS：量化了在页面加载期间，视口中元素的移动程度
五、前端监控之前端常见异常 1.静态资源错误 在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上
2.请求异常---400
3.JS错误 在页面运行时发生的JS错误会严重影响页面的正常渲染与交互，是前端监控的重点
4.白屏异常 通常我们可以通过判断DOM树的结构来粗略的判断白屏是否发生
六、封装一个通用的sdk sdk主要完成前两步，后两步需要后端服务和平台的支持。
