这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
一、为什么我们要聊前端监控
让我们从用户（浏览网页的人）的视角来抛出一些使用时遇到的问题：
这个网页打开好慢啊！
为什么这个网页会那么卡啊！
怎么网页的图片全都裂开了！
这个网页怎么是白花花的一片什么都没有！
1.为什么需要前端监控
当我们的网页有了前端监控的能力
- 打开好慢-页面某个关键资源渲染太慢。
- 交互卡顿-页面同步计算任务太重，阻塞渲染。
- 资源加载失败一客户端网络状态差，或上游服务节点异常。
- 页面白屏-页面脚本执行失败、关键资源加载失败、请求失败等
用前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因
2.前端监控到底监控了什么
- 性能指标
- 异常事件
- 用户行为
二、前端监控之常用的性能指标
1.web性能标准的诞生
早期网页是纯静态的，但随着Web爆发发展，页面交互越来越复杂。开发者开始思考如何提高Web性能、改善用户体验。
因此，2010年8月，W3C成立了Web性能工作组，由来自Google和Microsoft的工程师担任主席，目标是制定衡量W©b应用性能的方法和API。
随后，Web性能工作组开始制定一系列Web性能标准，应用到桌面和移动浏览器以及其他环境中，帮助Web开发人员评估和理解应用的性能特征。
2.传统的性能指标
传统的性能指标主要依赖Navigation Timing或者NavigationTiming2,通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能
3.以用户为中心的性能指标
传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差
这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验。
- FP(First Paint):首次渲染的时间点。sFP时间点之前，用户看到的都是没有任何内容的白色屏幕。
- FCP(First Contentful Paint):首次有内容渲染的时间点。
- FMP(First Meaningful Paint):首次绘制有意义内容的时间点。
- TTI(Time to Interactive):侧量页面从开始加载主要子资源完成洹染，并能够快速、可靠地响应用户输入所需的时间。TT引反映页面可用性的重要指标。
- TTI值越小，代表用户可以更早地操作页面用户体验就更好
三、前端监控之前端常见异常
1.静态资源错误
静态资源：加载页面所需的html、css和js等文件，s以及其他各类多媒体文件，如图片、音频和视频等。
静态资源错误：在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上
Http请求状态码分类
- 100-199信息响应
- 200-299成功响应
- 300-399重定向消息
- 400-499客户端错误响应
- 500-599服务端错误响应
请求异常=请求响应状态码>=400
对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常
2.Js错误
在页面运行时发生的小s错误会严重影响页面的正常渲染与交互，是前端监控的重点
3.白屏异常
前面几类异常都可以通过浏览器提供的标准化方法来监听到，而白屏异常没有标准化的监听方法，所以更考验前端监控开发者的功底
通常我们可以通过判断DOM树的结构来粗略的判断白屏是否发生
通常导致白屏发生的原因可能有如下几点：
- 发生Js错误导致关键资源渲染失败。
- 请求异常或静态资源加载失败
- 长时间的Js线程繁忙阻塞渲染任务
