这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
为什么需要前端监控
获取用户行为以及跟踪产品在用户端的使用情况，并以监控数据为基础，指明产品优化的方向。
前端监控通过对页面数据对采集和上报，来帮助开发者更快速地对质量差的页面进行分析和归因。 另外性能不佳对业务存在负面影响。
- 打开慢
- 交互卡顿
- 资源加载失败
- 页面白屏
前端监控可以分为三类：数据监控、性能监控和异常监控
性能指标
性能指标大致划分如下：
发生了吗？
FPFCP内容有用吗？FMPSILCP内容可用吗？TTITBT令人愉悦吗？FIDCLS
性能指标概述：
| 指标 | 名称 | 解释 |
|---|---|---|
| FP | First-Paint 首次渲染 | 表示浏览器从开始请求网站到屏幕渲染第一个像素点的时间 |
| FCP | First-Contentful-Paint 首次内容渲染 | 表示浏览器渲染出第一个内容的时间，这个内容可以是文本、图片或SVG元素等等，不包括iframe和白色背景的canvas元素 |
| SI | Speed Index 速度指数 | 表明了网页内容的可见填充速度 |
| LCP | Largest Contentful Paint 最大内容绘制 | 标记了渲染出最大文本或图片的时间 |
| TTI | Time to Interactive 可交互时间 | 页面从开始加载到主要子资源完成渲染，并能够快速、可靠的响应用户输入所需的时间 |
| TBT | Total Blocking Time 总阻塞时间 | 测量 FCP 与 TTI 之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应 |
| FID | First Input Delay 首次输入延迟 | 测量加载响应度的一个以用户为中心的重要指标 |
| CLS | Cumulative Layout Shift 累积布局偏移 | 测量的是整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数 |
| DCL | DOMContentLoaded | 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载 |
| L | Load | 检测一个完全加载的页面，页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件 |
| ... |
如何监听？（使用API）：
PerformanceObserver()window.performance
根据性能监控等结果可以进一步去优化前端性能，比如兼容低版本浏览器等动画效果，加快首屏加载等等。
异常事件
- 静态资源错误，页面无法正常渲染
- 请求异常（特殊：状态码0、异步请求拉取数据）
JS错误（undefined）- 白屏异常（归因：JS错误请求资源失败、请求异常、资源加载失败、JS阻塞）【用DOM树来判断】
JS错误：
EnventTarget.addEventListener()unhandledrejection
静态资源错误：
window.addEventListener()【e.srcElement兼容处理】
用户行为
- 数据监控
- 代码埋点
- 可视化监控
知道用户来源的渠道，促进产品的推广。了解用户在每个页面停留的时间，可以对停留长时间的页面增加广告推送等等
封装通用的SDK
数据采集 => 组装上报 => 数据清洗存储 => 数据消费
数据上报：navigation.sendBeacon
总结
本次课程主要介绍了前端监控的概念，并简单手写封装了前端监控通用的SDK。在代码实践封装的过程中受益良多。
