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

认识前端监控

什么是前端监控

采集从用户输入信息到页面展示的过程（浏览器，网络，渲染），以及后续用户交互中产出的性能指标与发生的异常事件，并上报到平台完成消费。

浏览网页时可能出现的问题——
打开慢，交互卡顿，图片裂开，网页加载失败

怎么找出真正的原因？——
前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因

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

网页：静态 → 动态

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

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

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

例如：

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

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

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

HTTP请求状态码 👉 juejin.cn/post/719063…

没有标准化的监听方法，可以通过DOM树的结构判断摆平是否发生

通常原因：

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

数据采集→组装上报→清洗存储→数据消费