这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
今日学习重点,了解前端监控,前端监控的用处,前端监控常用的性能指标和以用户为中心的性能指标.
什么是前端监控
前端监控是相对于后端监控提出的，是指从用户端的角度来检测系统的可用性。前端监控一般分为两类，一类是事件监控，另一类是错误监控。由于用户端复杂度的上升和精细化运营的需要，前端监控的重要性在不断提高。
例子：在浏览器里，从输入URL到页面展示，这中间发生了什么：
前端监控就是尽可能的采集这一过程以及后续用户交互中产生的性能指标与发生的异常事件并上报到平台完成消费。
为什么需要前端监控
当我们的网页有了前端监控的能力，前端监控通过对页面数据的采集和上报，来帮助开发者更快速的对质量差的页面进行分析和归因。
例如：
- 网页打开好慢——页面某个关键资源加载太慢。
- 交互卡顿——页面同步计算任务太重，阻塞渲染
- 资源加载失败——客户端网络状态差，或上游服务节点异常
- 页面白屏——页面脚本执行失败，关键资源加载失败，请求失败等
前端监控到底监控了什么？
- 性能指标
- 异常事件
- 用户行为
前端监控常用的性能指标
传统的性能指标：
以用户为中心的性能指标
FP：
首次渲染的时间，FP时间之前用户看到的都是没有任何内容的白色屏幕
FCP：
首次有内容渲染的时间。
FMP：
首次绘制有意义内容的时间点
TTI：
测量页面从开始到加载到主要资源完成渲染，并且能够快速，可靠的响应用户输入的时间.
TTI反映页面可用性的重要指标。TTI越小，代表用户可以更早的操作页面，用户的体验就越好
SI：
衡量页面可视区加载速度，帮助检查页面的加载体验差异
FID：
测量从用户第一次与页面交互（比如当他们单击链接、点按钮等等）直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间。
LCP：
最大的内容在可视区域内变得可见的时间点。
最大的元素，例如一篇文章中的一大段文字或产品页面上的一张图片，就是页面内容的最有用的元素。
LCP 优点：
- 容易理解
- 给出与 FMP 相似的结果
- 容易计算和上报
TBT:
量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久。
长任务：
如果一个任务在主线程上运行超过 50 毫秒，那么它就是长任务。超过 50ms 后的任务耗时，都算作任务的阻塞时间。
一个页面的 TBT，是从 FCP 到 TTI 之间所有长任务的阻塞时间的总和。
CLS：
量化了在页面加载期间，视口中元素的移动程度。 总结:今天了解了重点学习了以用户为中心的性能指标.
