这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
为什么需要前端
- 页面好慢 —— 页面某个关键资源渲染太慢。
- 交互卡顿 —— 页面同步计算任务太重，阻塞渲染。
- 资源加载失败 —— 客户端网络状态差，或上游服务节点异常。
- 页面白屏 —— 页面脚本执行失败、关键资源加载失败、请求失败等
前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因。
前端监控监控了什么？
- 性能指标
- 异常事件
- 用户行为
前端监控之常用性能指标
web性能标准的诞生
早期网页是纯静态的，但随着 Web 爆发式发展，页面交互越来越复杂。开发者开始思考如何提高 Web 性能、改善用户体验。
因此，2010 年 8 月，W3C 成立了 Web 性能工程组，由来自 Google 和 Microsoft 的工程师担任主席，目标是制定衡量 Web 应用性能的方法 和 API。
随后，Web 性能工作组开始制定一系列 Web 性能标准，应用到桌面和移动浏览器以及其他环境中，帮助 Web 开发人员评估和理解应用的性能特征。
传统的性能指标
传统的性能指标主要依赖Navigation Timing 或者 Navigation Timing 2，通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。
以用户为中心的性能指标
First Paint(FP) 首次绘制
首次渲染的时间点，可以视为白屏时间。
First Contentful Paint(FCP)
首次有内容渲染的时间点，指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。
该指标通常与用户无关。
First Meaningful Paint(FMP) 首次有效绘制
首次绘制有意义内容的时间点。
该指标非标准化并且约 20% 的情况下不准确。
Time to Interactive(TTI) 可交互时间
测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。该指标是反映页面可用性的重要指标，TTI 值越小，代表用户可以更早地操作页面，用户体验就越好。
Speed Index(SI) 首屏展现平均值
衡量页面可视区域加载速度，帮助检测页面的加载体验差异。
该指标检测难度较大，计算密集需要消耗较多资源，不可用于线上监控。
First Input Delay(FID) 首次输入延迟
测量从用户第一次与页面交互直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间。
Largest Contentful Paint (LCP) 最大内容绘制
最大的内容在可视区域内变得可见的时间点。
该指标容易计算与上报，给出的结果与 FMP 相似。
Total Blocking Time(TBT) 总阻塞时间
量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久。
若一个任务在主线程上运行超过 50 毫秒，则该任务为一个长任务，超过 50 毫秒后的任务耗时则为任务的阻塞时间，一个页面的 TBT 是从 FCP 到 TTI 之间所有长任务的阻塞时间总和。
Cumulative Layout Shift(CLS) 累积布局偏移
量化在页面加载期间，视口中元素的移动程度。
