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

为什么需要前端监控

前端监控概念

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

当我们的网页有了前端监控的能力

打开好慢——页面某个关键资源渲染太慢

交互卡顿——页面同步计算任务太重，阻塞渲染

资源加载失败——客户端网络状态差，或上游服务节点异常

页面白屏——页面脚本执行失败，关键资源加载失败，请求失败等

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

前端监控监控内容

1. 性能指标
2. 异常事件
3. 用户行为

前端监控之常用性能指标

Web性能标准的诞生

早期网页是纯静态的，但随着Web爆发式发展，页面交互越来越复杂。开发者开始思考如何提高Web性能、改善用户体验

因此，2010年8月，W3C成立了Web性能工作组，由来自Google和Microsoft的工程师担任主席，目标是制定衡量Web应用性能的方法和API

随后，Web性能工作组开始制定一系列Web性能标准，应用到桌面和移动浏览器以及其他环境中，帮助Web开发人员评估和理解应用的性能特征

以用户为中心的性能指标

传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么。

如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差

这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验

用户体验	指标
发生了吗？	FP(First Paint)，FCP(First Contentful Paint)
内容有用吗？	FMP(First Meaning Paint)，SI(Speed Index)
内容有用吗？	TTI(Time to Interactive)
令人愉悦吗？	FID(First Input Delay)

FP(First Paint)：首屏渲染的时间点。FP时间点之前，用户看到的都是没有任何内容的白色屏幕

FCP(First Contentful Paint)：首次有内容渲染的时间点

FMP(First Meaningful Paint)：首次绘制有意义内容的时间点

TTI(Time to Interactive)：测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间

TTI反映页面可用性的重要指标。TTI值越小，代表用户可以更早地操作页面，用户体验就更好

SI(Speed Index)：衡量页面可视区域加载速度，帮助检测页面的加载体验差异

A和B首次内容出现和完全加载时间是一样的，但是从用户角度A的体验明显更好

FID(First Input Delay)：测量从用户第一次与页面交互(比如当他们单击链接、点按按钮等等)直到浏览器对交互作出响应 ，实际能够开发处理事件时处理程序所经过的时间

为了衡量用户体验过程的性能指标

用户体验	指标
发生了吗？	FP(First Paint)，FCP(First Contentful Paint)
内容有用吗？	FMP(First Meaning Paint)，SI(Speed Index)，LCP(Largest Contentful Paint)
内容有用吗？	TTI(Time to Interactive)，TBT(Total Blocking Time)
令人愉悦吗？	FID(First Input Delay)，CLS(Cumulative Layout Shift)

LCP(Largest Contentful Paint)：最大的内容在可视区域内变得可见的时间点

最大的元素，例如一篇文章中的一大段文字或产品页面上的一张图片，大概就是让你理解页面内容的最有用的元素

LCP优点：1.容易理解2.给出与FMP相似的结果3.容易计算和上报

指标	定义	存在的问题
FCP	首次内容绘制时间	通常与用户无关
FMP	首次绘制有意义内容的时间点	非标准化并且难以在浏览器之间统一实现约20%的情况下不准确
SI	跟踪在视口中加载内容的视觉进程	复杂的指标，难以解释。计算密集，不可用于线上监控

TBT(Total Blocking Time)：量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久

长任务：如果一个任务在主线程上运行超过50毫秒，那么它就是长任务。超过50ms后的任务耗时，都算作任务的阻塞时间

一个页面的TBT，是从FCP到TTI之间所有长任务的阻塞时间的总和。

CLS(Cumulative Layout Shift)：量化了在页面加载期间，视口中元素的移动程度。

当我们点击按钮时，突然出现了一块内容。无论是以一种增加意外点击几率的方式加载广告，还是在加载图片时文本向下移动，内容的意外移动都会让人非常不舒服。

概述：前端监控之前端常用异常

静态资源错误

静态资源：加载页面所需的html、css和js等文件，以及其他各类多媒体文件，如图片、音频和视频等

静态资源错误：在拉取和加载静态资源的过程中产生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。

HTTP请求状态码分类

100-199 ————> 信息响应

200-299 ————> 成功响应

300-399 ————> 重定向消息

400-499 ————> 客户端错误响应

500-599 ————> 服务端错误响应

请求异常 = 请求响应状态码 >= 400

对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常

状态码为0

请求成功率 = 请求成功数 / (请求成功数 + 请求失败数)

JS错误

在页面运行时发生的JS错误会严重影响页面的正常渲染与交互，是前端监控重点

白屏异常

前端几类异常都可以通过浏览器提供的标准化方法来监听到，而白屏异常没有标准化的监听方法，所以更考验前端监控开发者的功底

通过我们可以通过判断DOM树的结构来粗略的判断白屏是否发生

监听到白屏发生后，我们还需要对白屏的发生进行归因

通常导致白屏发生的原因可能有如下几点：

1. 发生JS错误导致关键资源渲染失败
2. 请求异常或静态资源加载失败
3. 长时间的JS进程繁忙阻塞渲染任务

总结

对于前端监控更多地是对于项目的优化，项目的上线时出现的问题进行及时的修改