这是我参与「第五届青训营」伴学笔记创作活动的第 12 天
一、本堂课重点内容：
- 前端监控介绍
- 常用性能指标
- 常见异常
- 实战演练
二、详细知识点介绍：
前端监控
在浏览器中从输入URL到页面展示其中的过程（注：此为经典面试题）
前端监控就是尽可能的采集上述过程以及后续用户交互中产生的性能指标与发生的异常事件并上报的平台
浏览网页常见问题：
- 打开慢 -页面某关键资源渲染慢
- 交互卡顿 -页面同步计算任务重，阻塞渲染
- 资源加载失败 -客户端网络差或上游服务节点异常
- 页面白屏 -页面脚本执行失败、关键资源加载失败
前端监控通过对页面数据的采集和上报，来帮助开发者快速地对质量差的页面进行分析与归因
监控页面质量重要性：
提高性能，也能提高业务收益，留住or增加用户
例子：缤趣网、COOK网
主要监控：
- 性能指标
- 异常事件
- 用户行为
常用性能指标
随着页面逐渐变得动态，web技术的不断发展，页面变得越来越“重”，所以我们需要性能指标来度量页面质量
由传统性能指标发展为以用户为中心的性能指标，专注于用户体验
- FP：首次渲染时间点。FP前，用户看见的都是白屏
- FCP：首次有内容渲染的时间点。
- FMP：首次绘制有内容的时间点。
- TTI：从开始到加载到主要字子元完成渲染，并能够快速可靠响应用户输入的时间。（翻译可用性）
- SI：衡量页面可视区域加载速度，监控难度较高，帮助检查页面加载体验
- FID：测量从用户第一次与页面交互直到浏览器对交互做出响应，实际开始处理时间锁经过的时间
- LCP：最大内容在可视区域变得可见的时间点，指页面主要的内容加载完成时间
| 定义 | 特点or问题 | |
|---|---|---|
| FCP | 首次内容绘制时间 | 通常和用户无关 |
| FMP | 首次绘制有意义内容时间 | 非标准化，难以统一实现 |
| SI | 跟踪在页面加载内容的视觉进程 | 复杂指标，计算密集，不可用于线上监控 |
| LCP | 主要内容加载完成时间 | 容易解释，容易计算、上报 |
- TBT：量化主线程可用前的繁忙程度
注：在主线程运行超过50ms视为长任务，超过50ms的时间视作长任务的堵塞时间
一个页面的TBT是FCP到TTI之间所有长任务的阻塞总和
- CLS：量化页面加载期间，页面中元素的移动速度？或者说是元素偏移？
异常事件
静态资源错误
静态资源：html、css、js等文件以及各类多媒体文件
在拉取和加载静态资源是发生意外错误，导致加载失败，常见的有：网络异常
请求异常
http请求状态码>=400时 为发生了请求异常
异步拉取静态资源发生的错误也属于请求异常
- 异常指标：请求成功率
JS错误
JS运行错误，影响了页面的正常渲染与交互，是前端监控的重点
白屏异常
没有标准方法监听
通过判断DOM树的结构粗略判断白屏是否发生
通常原因：
- 发生JS错误导致关键资源渲染失败
- 请求异常或静态资源加载失败
- 长时间的JS线程繁忙阻塞渲染任务
三、实践练习例子：
相关API or 方法
性能指标监控：
performanceObserver、performance
performanceObserver比performance能取多一点指标
Js错误监控/静态资源错误监控
window.addEventListener、unhandledrejection
请求异常监控：
hook xhr和fetch对象
基本流程
- 写好监控对象/流程
- monitor封装
- 封装通用sdk
- 拓展复用
sdk监控封装流程：
- 上报地址url
- 创建sdk对象存储
- report函数：数据上报，Navigator.sendBeacon
- loadMonitor
- start
实践：
四、课后个人总结：
今天主要讲述了前端监控SDK的相关知识及其简单实战演练。我在今天的课程中了解了前端需要监控的很多方面，也学到了一些错误异常的常见原因。在后半断的课程，老师带着我们逐步实现一些简单SDK的编写。虽然还不能独立编写复杂完善的SDK，但跟着老师一步步敲代码，逐步理解流程，对其代码结构加深印象，对后续学习是很有帮助的。
如有错误，欢迎指出，谢谢。
