这是我参与「第五届青训营 」伴学笔记创作活动的第14天，下面跟我一起看看青训营前端监控部分讲了什么吧~
1.什么是前端监控
2.为什么需要前端监控
前端监控就是尽可能的采集这一过程以及后续用户交互产出的性能指标与发生的异常事件并上报到平台完成消费。前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析和归因。
3.前端监控监控什么？
- 性能指标
- 异常事件
- 用户行为
4.web 性能标准地诞生
早期网页是纯静态的，但随着 Web 爆发式发展，页面交互越来越复杂。开发者开始思考如何提高 Web 性能，改善用户体验。因此，2010 年 8 月，W3C 成立了 Web 性能工作组，由来自 Google 和 Microsoft 的工程师担任主席，目标是指定衡量 Web 应用性能的方法和 API。随后，Web 性能工作组开始指定一系列 Web 性能标准，应用到桌面和移动浏览器以及其他环境中，帮助 Web 开发人员评估和理解应用的性能特征。
5.传统的性能指标
传统的性能指标主要依赖 Navigation Timing 或者 Navigation Timing 2，通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。
6.以用户为中心的性能指标
传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么。如果你仅仅是把加载速度优化的更快，你很快会发现网站的用户体验依然很差。
这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验。
| 用户体验 | 指标 |
|---|---|
| 发生了吗？ | FP（First Paint)，FCP（First Contentful Paint） |
| 内容有用吗？ | FMP（First Meaning Paint），SI（Speed Index），LCP（Largest Contentful） |
| 内容可用吗？ | TTI（Time to Interactive），TBT（Total Blocking Time） |
| 令人愉悦吗？ | FID（First Input Delay），CLS（Cumulative Layout Shift） |
-
FP（First Paint）：首次渲染的时间。FP 时间点之前，用户看到的都是没有任何内容的白色屏幕。
-
FCP（First Contentful Paint）：首次有内容渲染的时间点。
-
FMP（First Meaningful Paint）：首次绘制有意义内容的时间点。
-
TTI（Time to Interactive）：测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需地时间。TTI 是反映页面可用性的重要指标。TTI 值越小，代表用户可以更早地操作页面，用户体验就更好。
-
SI（Speed Index）：衡量页面可视化区域加载速度，帮助检测页面的加载体验差异。
-
FID（First Input Delay）：测量从用户第一次与页面交互（比如当他们单击链接、点按钮等等）直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间。
-
LCP（Largest Contentful Paint）：最大的内容在可视区域内变得可见的时间点。（最大的元素，例如一篇文章中的一大段文字或产品页面上的一张图片，就是页面内容的最有用的元素。）
注：LCP 优点：
- 容易理解
- 给出与 FMP 相似的结果
- 容易计算和上报
- TBT（Total Blocking Time）：量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久。
注：
- 长任务：如果一个任务在主线程上运行超过 50 毫秒，那么它就是长任务。超过 50ms 后的任务耗时，都算作任务的阻塞时间。
- 一个页面的 TBT，是从 FCP 到 TTI 之间所有长任务的阻塞时间的总和。
- CLS（Cumulative Layout Shift）：量化了在页面加载期间，视口中元素的移动程度。
7.前端常见异常
1. 静态资源错误
静态资源：加载页面所需的 html、css 和 js 等文件，以及其他各类多媒体文件，如图片、音频和视频等。
静态资源错误：在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。
2.请求异常
Http 请求状态码分类
0 ——> XMLHttpRequests 被停止
100 - 199 ——> 信息响应
200 - 299 ——> 成功响应
300 - 399 ——> 重定向消息
400 - 499 ——> 客户端错误响应
500 - 599 ——> 服务端错误响应
请求异常 = 请求状态码 >= 400
对与通过异步请求拉取的静态资源错误，也可选择归纳到请求异常。
3.JS错误
在页面运行时发生的 JS 错误会严重影响页面的正常渲染与交互，是前端监控的重点。
4.白屏异常
1）前面几类异常都可以通过浏览器提供的标准化方法来监听到，而白屏异常没有标准化的监听方法，所有更考验前端监控开发者的功底。
2）通常我们可以通过判断 DOM 树的结构来粗略的判断白屏是否发生。
3）通常导致白屏发生的原因可能有如下几点：
-
发生 JS 错误导致关键资源渲染失败。
-
请求异常或静态资源加载失败。
-
长时间的 JS 线程繁忙阻塞渲染任务。
