文章第一句话为“这是我参与「第五届青训营」伴学笔记创作活动的第 26 天，今天主要学习了前端监控SDK开发，以下是我在课堂上做的课堂笔记：

前端监控的一些基础

屏幕截图 2023-02-08 210709.png

是什么？

在上面这张图中有一句话很简练：前端监控就是尽可能的采集在这一过程以及后续用户交互中产生的性能指标与发生的异常事件并上报到平台完成消费。（简言之就是检查错误并上报平台，予以修复）。网络上查的前端监控：一般分为三种，分别是页面埋点（监控数据）、性能监控、以及异常监控（代码报错、接口异常上报）。

功能？

前端监控的功能：前端监控通过对页面数据的采集和上报，来帮助开发者更快速的对质量差的页面进行分类和归因。研究表明：性能不佳会对业务目标产生负面影响。例如，BBC发现他们的网站加载每增加一秒，他们就会失去百分之十的用户。

那么，前端监控到底监控什么呢？监控：性能指标、用户行为、异常事件。

前端监控之常用指标

Web性能标准的诞生

关于Web性能标准的诞生推荐大家去百度搜索。

传统的性能指标

传统的性能指标主要依赖Navigation Timing（此链接为另外一个作者的）或者Navigation Timing2，通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。下图是：Navigation Timing2 屏幕截图 2023-02-08 221410.png

以用户为中心的性能指标

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

以用户为中心的性能指标就是用户的体验，而用户体验又可以看成这四个问题（括号里面的是对应的指标）：发生了吗（FP,FCP）？内容有用吗（FMP,SI,LCP）？内容可用吗（TTI,TBT）？令人愉悦吗（FID,CLS）？

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

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

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

SI(Speed Index)：衡量页面可视区域加载速度，帮助检测页面的加载体验差异。屏幕截图 2023-02-09 212449.png TTI(Time to Interactive)：衡量页面从开始加载到主要子资源完成渲染，并能够快速、可靠的响应用户输入所需的时间。TTI反映页面可用性的重要指标，TTI值越小代表用户可以更早的操作页面，用户体验就更好。

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

LCP(Largest Contentful Paint)：最大的内容（让你理解页面内容的最有用的元素）在可视区域内变得可见的时间点。屏幕截图 2023-02-09 214735.png TBT(Total Blocking Time)：量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久。一个页面的TBT，是从FCP到TTI之间所有长任务（如果一个任务在主线程上运行超过50毫秒，那么它就是长任务。超过50毫秒后的任务耗时，都算做任务的阻塞时间）的阻塞时间的总和。