这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
为什么需要前端
- 页面好慢 —— 页面某个关键资源渲染太慢。
- 交互卡顿 —— 页面同步计算任务太重，阻塞渲染。
- 资源加载失败 —— 客户端网络状态差，或上游服务节点异常。
- 页面白屏 —— 页面脚本执行失败、关键资源加载失败、请求失败等
前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因。
前端监控监控了什么？
- 性能指标
- 异常事件
- 用户行为
前端监控之常用性能指标
web性能标准的诞生
早期网页是纯静态的，但随着 Web 爆发式发展，页面交互越来越复杂。开发者开始思考如何提高 Web 性能、改善用户体验。
因此，2010 年 8 月，W3C 成立了 Web 性能工程组，由来自 Google 和 Microsoft 的工程师担任主席，目标是制定衡量 Web 应用性能的方法 和 API。
随后，Web 性能工作组开始制定一系列 Web 性能标准，应用到桌面和移动浏览器以及其他环境中，帮助 Web 开发人员评估和理解应用的性能特征。
传统的性能指标
传统的性能指标主要依赖Navigation Timing 或者 Navigation Timing 2，通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。
以用户为中心的性能指标
传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么。如果仅仅是吧加载速度优化的更快，很快就会发现网站的用户体验依然很差。
这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验。
| 用户体验 | 指标 |
|---|---|
| 发生了吗？ | FP（First Paint），FCP（First Contentful Paint） |
| 内容有用吗？ | FMP（First Meaningful Paint），SI（Speed Index） |
| 内容可见吗？ | TTI（Time to Interactive） |
| 令人愉悦吗？ | FID（First input Delay） |
FP：首次渲染的时间点。FP 时间点之前，用户看到的都是没有任何内容的白色屏幕。
FCP：首次有内容渲染的时间
FMP：首次绘制有意义内容的时间点。
TTI：测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间
TTI 反映页面可用性的重要指标。TTI 值越小，代表用户可以更早地操作页面，用户体验就更好。
SI：衡量页面可视区加载速度，帮助检测页面的加载体验差异。
FID：测量从用户第一次与页面交互（比如当他们单机链接、点按按钮等等）直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间。
清水碧于天，画船听雨眠。
