这是我参加「第五届青训营」伴学笔记创作活动的第 11 天
为什么要前端监控
什么是前端监控
前端监控就是尽可能的采集这一过程以及后续用户交互中产生的性能指标与发生的异常事件并上报到平台完成消费。
为什么需要前端监控
-
用户视角
- 这个网页打开好慢啊
- 为什么这个网页会这么卡
- 怎么网页的图片全都裂开了
- 这个网页怎么是百花花的一片什么都没有
-
当具备前端监控的能力
- 打开好慢 —— 页面某个关键资源渲染太慢。
- 交互卡顿 —— 页面同步计算任务太重，阻塞渲染
- 资源加载失败 —— 客户端网络状态差，或上游服务节点异常
- 页面白屏 —— 页面脚本执行失败，关键资源加载失败、请求失败等
前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因。
前端监控到底监控了什么
-
性能指标
- 可交互性
- 服务器稳定性
- 加载速度
- 可用性
- 业务数据
-
异常事件
-
用户行为
前端监控之常用性能指标
-
传统性能指标
- 主要依赖 Navigation Timing 或者 Navigation Timing2 通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。
- 传统的性能指标专注于容易衡量的技术细节，但是他们很难反应出用户真正关心的是什么。如果你仅仅是把加载速度优化地更快，很快就会发现网站的用户体验依然很差。
-
以用为为中心的性能指标
-
发生了吗？—— FP（First Paint），FCP（First Contentful Paint）
- FP：首次渲染的时间点。FP时间点之前，用户看到地都是没有任何内容的白色屏幕。
- FCP：首次有内容渲染的时间点
-
内容有用吗？ —— FMP（First Meaningful Paint），SI（Speed Index）LCP（Largest Contentful Paint）
-
FMP：首次绘制有意义内容的时间点
-
LCP：最大的内容在可视区域内变得可见的时间点。最大的元素，例如一篇文章中的一大段文字或产品页面上的一张图片，大概就是让你理解页面内容的最有用的元素。
- 优点：容易理解；给出与 FMP 相似的结果；容易计算与上报
-
-
内容可用吗？—— TTI（Time to Interactive）TBT（Total Blocking Time）
- TTI：测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。TTI反应页面可用性的重要指标。TTI值越小，代表用户可以更早地操作页面，用户体验就更好。
- TBT：量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久。一个页面的 TBT 是从 FCP 到 TTI 之间所有长任务的阻塞时间的总和。
-
令人愉悦吗？—— FID（First Input Delay），CLS（Cumulative Layout Shift）
- FID：测量从用户第一次与页面交互（比如当他们单击链接、点按按钮等等）直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间。
- CLS：量化了在页面加载期间，视口中元素的移动程度。
-
前端监控之前端常见异常
静态资源错误
静态资源：加载页面所需的html、css和js等文件，以及其他各类多媒体文件，如图片、音频和视频等。
静态资源错误：在拉取和加载静态资源的过程中发生了预期以外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。
请求异常
请求响应状态码 >= 400
对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常
请求成功率 = 请求成功数 / （请求成功数 + 请求失败数）
Js 错误
在页面运行时发生的 Js 错误会严重影响页面的正常渲染与交互，是前端监控的重点
白屏异常
通常我们可以通过判断 DOM 树的结构来粗略的判断白屏是否发生。
- 发生 Js 错误导致关键资源渲染失败
- 请求异常或静态资源加载失败
- 长时间的 Js 线程繁忙阻塞渲染任务。
