这是我参与「第五届青训营」伴学笔记创作活动的第14天

一、前端监控基础

1.什么是前端监控？

前端监控就是尽可能地采集从输入URL到页面展示这一过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费。

2.为什么需要前端监控？

前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因。

监控页面质量非常重要！

3.前端监控到底监控了什么

性能指标
异常事件
用户行为

4.前端监控的目的

提升用户体验
更快的发现发现异常、定位异常、解决异常
了解业务数据，指导产品升级——数据驱动的思想

5.前端监控的流程

采集
上传
分析
报警

二、前端监控之常用性能指标

1.传统的性能指标

传统的性能指标主要依赖Navigation Timing或者Navigation Timing 2，通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。

2.以用户为中心的性能指标

传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么。如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差。
这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验。

FP (First Paint) ：首次渲染的时间点。FP 时间点之前，用户看到的都是没有任何内容的白色屏幕
FCP (First Contentful Paint) ：首次有内容渲染的时间点
FMP (First Meaningful Paint) ：首次绘制有意义内容的时间点
TTI (Time to Interactive) ：测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间
- TTI反映页面可用性的重要指标。TTl 值越小，代表用户可以更早地操作页面，用户体验就更好
SI (Speed Index) ：衡量页面可视区域加载速度，帮助检测页面的加载体验差异
FID (First Input Delay) ：测量从用户第一次与页面交互(比如当他们单击链接、点按按钮等等)直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间
LCP (Largest Contentful Paint) ：最大的内容在可视区域内变得可见的时间点
- LCP优点:
  - 容易理解
  - 给出与FMP相似的结果
  - 容易计算和上报
TBT (Total Blocking Time) ：量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久
- 长任务:如果个任务在主线程上运行超过50毫秒，那么它就是长任务。超过50ms后的任务耗时，都算作任务的阻塞时间
- 一个页面的TBT，是从FCP到TTl之间所有长任务的阻塞时间的总和
CLS (Cumulative Layout Shift) ：量化了在页面加载期间，视口中元素的移动程度

三、前端监控之前端常见异常

静态资源错误
- 即在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上
- 静态资源:加载页面所需的html、css 和js等文件，以及其他各类多媒体文件，如图片、音频和视频等
请求异常
- 请求异常=请求响应状态码>=400
- 对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常
JS错误
- 在页面运行时发生的Js错误会严重影响页面的正常渲染与交互，是前端监控的重点
白屏异常
- 白屏异常没有标准化的监听方法，更考验前端监控开发者的功底
- 通常我们可以通过判断DOM树的结构来粗略的判断白屏是否发生
- 通常导致白屏发生的原因可能有如下几点:
  - 发生Js错误导致关键资源渲染失败
  - 请求异常或静态资源加载失败
  - 长时间的Js线程繁忙阻塞渲染任务

四、课后总结

本章节学习了前端监控的相关知识。近年来，前端监控越发重要，虽然市面上有许多前端监控平台可供使用，但是学好前端监控以供不同的、个性化的需求非常重要。本次学习第一次接触前端监控，对于前端监控有了较多了解，课程中实操的项目对于自身来说还有许多难点，需要课后仔细钻研。

前端监控SDK实战 | 青训营笔记