前端监控SDK|青训营笔记

Unicode
96 阅读4分钟

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

本堂课重点内容

  1. 引入前端监控的概念
  2. 介绍前端监控的性能指标与异常
  3. 实战:封装用于监听性能指标与前端异常的监听器
  4. 实战:封装一个有完整上报能力的 sdk

重点知识点介绍

前端监控性能指标

:heavy_check_mark:以用户为中心的性能指标 :x:传统的以加载速度来衡量的指标

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

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

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

  • TTI (Time to Interactive):测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。

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

  • Sl(Speed Index):衡量页面可视区域加载速度，帮助检测页面的加载体验差异

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

  • LCP(Largest Contentful Paint)：最大的内容在可视区域内变得可见的时间点。

    最大的元素类似于最有用的元素，大概就是让你能够理解页面内容的最有用的元素

  • TBT (Total Blocking Time)：量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久。

    • 长任务︰如果一个任务在主线程上运行超过50毫秒，那么它就是长任务。超过50ms后的任务耗时都算作任务的阻塞时间
    • 一个页面的TBT，是从 FCP到TTI之间所有长任务的阻塞时间的总和。

  • CLS (Cumulative Layout Shift):量化了在页面加载期间，视口中元素的移动程度。

    当我们点击按钮时，突然出现了一块内容。无论是以一种增加意外点击几率的方式加载广告，还是在加载图片时文本向下移动，内容的意外移动都会让人非常不舒服

    用户体验性能指标
    发生了吗FP, FCP
    内容有用吗FMP, SI, LCP
    内容可用吗TTI, TBT
    令人愉悦吗FID, CLS

常见异常

  • 静态资源错误

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

  • 请求异常

    请求响应状态码≥400

  • JS错误

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

  • 白屏异常

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

监控前端性能与异常

封装SDK

graph LR
1[数据采集]-->2[组装上报]-->3[清洗存储]-->4[数据消费]

按需加载监控能力 - 码上掘金 (juejin.cn)

引用参考

‬⁢‍⁡‬⁡⁣‌⁣⁢‍⁣⁤⁣⁡‍⁤‌‍⁢⁣⁡⁣‬⁡⁡⁤‍⁣‌‬‬‬⁡⁢前端监控SDK实战.pptx - 飞书云文档 (feishu.cn)

avatar
文章
阅读
粉丝