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

什么是前端监控

前端监控就是尽可能的采集这一过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费。 前端监控通过对页面数据的采集和上报,来帮助开发者更快速地对质量差的页面进行分析与归因。√

常用性能指标

传统性能指标

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

以用户为中心的性能指标

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

• FP (First Paint):首次渲染的时间点。FP时间点之前，用户看到的都是没有任何内容的白色屏幕。
• FCP (First Contentful Paint):首次有内容渲染的时间点。
• FMP (First Meaningful Paint):首次绘制有意义内容的时间点。
• TTI (Time to Interactive):测量页面从开始加载到主要子资源完成渲染,并能够快速、可靠地响应用户输入所需的时间。
• TTI反映页面可用性的重要指标。TTI值越小，代表用户可以更早地操作页面，用户体验就更好。
• sI(Speed Index):衡量页面可视区域加载速度，帮助检测页面的加载体验差异。
• FID (First Input Delay):测量从用户第一次与页面交互(比如当他们单击链接、点按按钮等等)直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间

前端常见异常

静态资源错误

静态资源:加载页面所需的html、css和js 等文件，以及其他各类多媒体文件，如图片、音频和视频等。 静态资源错误:在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。

请求异常

JS异常

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

白屏异常

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

• 发生Js错误导致关键资源渲染失败。
• 请求异常或静态资源加载失败。
• 长时间的Js线程繁忙阻塞渲染任务。