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

今天我跟着李俊安老师一起学习了前端监控SDK开发相关的知识，之前几乎没有接触过这个领域，这节课让我认识了前端监控SDK，总的来说收获是很大的。

一，本节课重点内容

本节课的主要内容大概可以分为如下几部分

• 什么是前端监控及其优势与用处
• 几种不同的性能指标
• 静态资源错误问题，请求异常问题，JS错误问题及白屏问题
• 性能指标实际监控
• JS错误实际监控
• 静态资源实际监控
• 请求资源实际监控
• sdk的封装
• sdk的健壮性
• FMP,CLS及TTL

二，详细知识介绍

用户在输入URL到看到网页到使用其中的内容和功能，这期间会发生很多很多的事情，包括打开速度，响应速度，部分资源请求不到，部分功能错误等等问题。而我们开发者难以发现这些用户在不同情况下使用的产生的问题。所以这也促使了前端监控的诞生，我们可以通过前端监控来监控用户在不同情况下，面对不同问题及一些性能和用户体验上发生的问题，进行一个实时监控。

前端性能指标分为传统指标和以用户为中心的性能指标

传统性能指标主要通过Navigation等来作为检测标准，而以用户为中心的标准则是通过用户的实际体验来做为衡量标准，因为有时候性能高等指标并不能衡量用户的最终的体验。

• 以用户为中心的性能指标，因为传统性能指标只是衡量技术的细节，要专注于用户的使用体验

  • 发生了吗 FP，FCP
  • 内容有用吗 FMP，SI
  • 内容可用吗 TTI
  • 令人愉悦吗 FID
  • LCP与FMP对比， LCP优点：容易理解，给出与FMP相似的结果，容易计算和上报
  • TBT 量化了主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久
  • CLS 量化了在页面加载期间，视口中元素移动程度

三，实践的例子

• 可以用Performance和PerformanceObserver可以监控到一些标准的渲染性能数据。
• 利用window.addEventListener的error事件可以监控到静态资源错误，注意要和js error进行区分。