这是我参与「第五届青训营 」伴学笔记创作活动的第 18天
什么是前端监控
所谓前端监控就是尽可能的采集用户从浏览器输入URL到页面展示这一过程和后续用户交互中产生的性能指标与发生的异常事件并上报到平台完成消费。
2.为什么需要前端监控
因为页面可能会出现一些异常情况，例如：页面加载慢、资源加载不出来、白屏以及一些影响用户体验的页面切换或元素位置变更，而前端监控通过对页面数据进行采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因。
3.前端监控内容
- 可交互性：包含卡顿监控和请求性能
- 服务器稳定性：主要是计算请求成功率
- 加载速度：主要监控首屏性能
- 可用性：包含渲染错误/白屏、请求错误、JS错误、静态资源错误
- 业务数据：包含PV/UV、自定义事件/打点
常用性能指标
Web性能标准的诞生
早期网页是纯静态的，但随着Web爆发式发展，页面交互越来越复杂。开发者开始思考如何提高Web性能、改善用户体验。 因此，2010年8月，W3C成立了Web性能工作组，由来自Google和Microsoft的工程师担任主席，目标是制定衡量Web应用性能的方法和API。
传统的性能指标
传统的性能指标主要依赖Navigation Timing或者Navigation Timing 2,通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。
以用户为中心的性能指标
传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么。如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差。
传统性能指标主要依赖Navigation Timing或者Navigation Timing 2，通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。
以用户为中心的性能指标：
- FP（First Paint）:首屏渲染的时间点，FP时间点之前，用户看到的都是没有任何信息的白屏。标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点
- FCP（First Contentful）：首次有内容渲染的时间点。标记的是浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至 元素。
- FMP（First Meaningful paint）：首次绘制有意义内容的时间点。标记的是页面主要内容绘制的时间点，例如视频应用的视频组件、天气应用的天气信息、新闻应用中的新闻条目。
- TTI（Time to Interactive）：首次可交互时间。测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠的响应用户输入所需的时间。TTI反映页面可用性的重要指标，TTI值越小，代表用户可以更早的操作页面，用户体验就更好。
- SI（Speed Index）：衡量页面可视区域加载速度，帮助检测页面的加载体验差异。
- FID（First Input Delay）：测量从用户第一次与页面交互直到浏览器对交互做出响应，实际能够处理事件时处理程序所经过的时间。
- LCP（Largest Contentful）：最大的内容在可视区域内变的可见的时间点。标记在可视区“内容”最大的可见元素开始绘制在屏幕上的时间点。
- TBT（Total Blocking Time）：量化主线程在空闲之前的繁忙时间程度，有助于理解在加载时间，页面无法响应用户输入的时间有多久。
- CLS（Cumulative Layout Shift）：量化了在页面加载期间，视口中元素的移动速度。
- 静态资源错误
- 静态资源：加载页面所需的html、css和js等文件，以及其他各类多媒体文件，如图片、音频和视频等。
- 静态资源错误：在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染在页面上。
- 请求异常
- 100-199-------->信息响应
- 200-299-------->成功响应
- 300-399-------->重定向消息
- 400-499-------->客户端错误响应
- 500-599-------->服务端错误响应
- JS错误
- 白屏异常
通常导致白屏发生的原因：
- 发生JS错误导致关键资源渲染失败
- 请求异常或静态资源加载失败
- 长时间的JS线程繁忙阻塞渲染任务
6.监控前端性能与异常
- 利用Performance和PerformanceObserver可以监控到一些标准的渲染性能数据。
