这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
什么是前端监控？
经典面试题：
在浏览器中，从输入 URL 到页面展示，这中间发生了什么？
前端监控就是尽可能的采集这一过程以及后续用户交互中，产出的性能指标与发生的异常事件，并上报到平台完成消费。
为什么需要前端监控？
在浏览网页的人的角度看，我们经常会遇到一系列问题：
- 网页加载速度慢
- 网页卡（比如：FPA值低）
- 网页图片裂开
- 网页白花花一片
- ...
在开发网页的人的角度，回答浏览网页的人遇到的问题：
不正确、不负责任的对页面错误的归因
- 网页加载速度慢 —— 用户用的 XP + IE 浏览器，建议重装系统
- 网页卡（比如：FPA值低）—— 用户电脑配置太差，建议升级配置
- 网页图片裂开 —— 用户网络质量差，建议换一个网络
- 网页白花花一片 —— 自己的电脑没有这种问题，应该是偶发问题
- ...
当网页有了前端监控的能力
- 网页加载速度慢 —— 网页某个关键资源渲染太慢
- 网页卡（比如：FPA值低）—— 页面同步计算任务太重，阻塞渲染
- 网页图片裂开 —— 客户端网络质量差，或上游服务节点异常
- 网页白花花一片 —— 页面脚本执行失败，关键资源加载失败，请求失败等
- ...
前端监控通过对页面数据的采集和上报，来帮助开发者更快地对质量差的网页进行分析与归因。
前端监控进行的内容
内容
- 性能指标
- 异常事件
- 用户行为
性能指标
传统的性能指标
传统的性能指标主要依赖 Navigation Timing 或 Navigation Timing2，通过记录一个文档从发起请求到加载完毕的各个阶段的性能耗时，以加载速度来衡量性能。
以用户为中心的性能指标
传统的性能指标只关注了技术细节，并没有注意点用户体验感。
↓
