前端监控 sdk | 青训营笔记

玉衡Kqing
132 阅读6分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
重点内容：🍷前端监控🍷 🍸性能指标🍸 🍺常见异常🍺

🍵前言🍵

今天接触到了一个新名词，前端监控。之前甚至都没有听过这个东西，今天这节课真的是就像认识一位新朋友一样，一起来看看这节课有什么内容吧~

🍹什么是前端监控🍹

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

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

前端监控到底监控了什么？

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

🥤性能指标🥤

传统的性能指标

image.png
就像这张图一样，一大堆数字列出来。看出什么了吗？并没有。跟我使用浏览器有什么关系呢？不知道。只是看上去很厉害的样子。

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

以用户为中心的性能指标

image.png

  • FP (First Paint) : 首次渲染的时间点，也叫首屏渲染时间。 FP 时间点之前，用户看到的都是没有任何内容的白色屏幕。
  • FCP (First Contentful Paint) : 首次有内容染的时间点，只要呈现出内容，也就是有像素展现，这个点就是FCP。
  • FMP (First Meaningful Paint) : 首次绘制有意义内容的时间点，一般就是出现有用信息的时间点。
  • TTI (Time to Interactive) : 测量页面从开始加载到主要子资源完成渲染并能够快速、可靠地响应用户输入所需的时间.也就是说，基本加载完成，用户可以进行交互所需的时间。

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

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

以上这些指标属于基本指标，但是只有这些指标监控是远远不足的，接下来再来看三个比较重要的指标。

  • LCP (Largest Contentful Paint) : 最大的内容在可视区域内变得可见的时间点。最大的元素，例如文章的主题内容，图片的主要信息，就是能够让用户理解我们页面的最有用的元素。 image.png 对于用户来说，LCP更容易被理解，给出的结果与FMP是相似可替代的，同时也更容易被计算和上报。所以通常使用的都是LCP指标。

  • TBT (Total Blocking Time) : 量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久。 image.png 长任务: 如果一个任务在主线程上运行超过 50 毫秒，那么它就是长任务。超过50ms 后的任务耗时，都算作任务的阻塞时间。

    一个页面的TBT，是从FCP 到 TTI 之间所有长任务的阻塞时间的总和。前文我们提到FCP是首次渲染有内容的时间点，TTI是响应时间点。

    由于JS是单线程，所以通常会先进行页面渲染，然后再进行交互内容。页面渲染完成就是黄色的内容，然后再进行交互加载，这就算做阻塞时间。所以TBT衡量的就是加载交互这部分所用的时间，站在用户的角度考虑，页面加载出来了，但是半天点不动，就会很生气。所以TBT是一个对于用户体验来讲十分重要的指标！

  • CLS (Cumulative Layout Shift) : 量化了在页面加载期间，视口中元素的移动程度。这种最常见的就是广告信息了，在网页上本来想要点击某个图标，突然弹出来一个广告，就点进了广告里，这是十分生气的，所以CLS也是十分重要的指标。

小结

image.png

🧃常见异常🧃

静态资源错误

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

image.png

请求异常

Http 请求状态码分类

  • 100 ---------> 199 信息响应
  • 200 ---------> 299 成功响应
  • 300 ---------> 399 重定向消息
  • 400 ---------> 499 客户端错误响应
  • 500 ---------> 599 服务端错误响应
    请求异常 ＝ 请求响应状态码>= 400
    对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常

JS错误

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

白屏异常

前面几类异常都可以通过浏览器提供的标准化方法来监听到，而白屏异常没有标准化的监听方法，所以更考验前端监控开发者的功底。我们可以通过判断 DOM 树的结构来粗略的判断白屏是否发生。

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

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

🍾总结🍾

今天主要了解了前端监控的相关指标及其基本含义，主要介绍以用户为中心的性能指标，因为用户体验才是开发的核心要素，也包含一些常见异常的分析判断。对前端监控有了一个新的认识。

avatar
文章
阅读
粉丝