前端监控 SDK 开发 | 青训营笔记

s8x
71 阅读3分钟

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

前端监控的概念

  • 概念：获取用户行为以及跟踪产品在用户端的使用情况

  • 意义

    • 帮助开发者更快速地对质量差的页面进行分析和归因

    image.png

    • 提升用户留存率

  • 监控指标

    image.png

前端监控的性能指标

  • 传统的性能指标专注于容易衡量的技术细节

  • 以用户为中心的性能指标

    image.png

    • FP（FIrst Paint）：首次渲染的时间点。FP之前，用户看到的是白色屏幕
    • FCP（First Contentful Paint）：首次有内容渲染的时间点
    • FMP（First Meaningful Paint）：首次绘制有意义内容的时间点
    • TTI (Time to Interactive)：测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。 TTI反映页面可用性的重要指标。TTI值越小，代表用户可以更早地操作页面,用户体验就更好的

    image.png

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

    image.png

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

    image.png

    • LCP(Largest Contentful Paint)：最大的内容在可视区域内变得可见的时间点。（最大的元素，例如一篇文章中的一大段文字或产品页面上的一张图片，大概就是让你理解页面内容的最有用的元素。）
    • TBT (Total Blocking Time)：量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久。
      • 长任务︰如果一个任务在主线程上运行超过50毫秒，那么它就是长任务。超过50ms后的任务耗时，都算作任务的阻塞时间。
      • 一个页面的TBT，是从 FCP到TTI之间所有长任务的阻塞时间的总和。
    • CLS (Cumulative Layout Shift):量化了在页面加载期间，视口中元素的移动程度。
      • 元素突然发生偏移：当我们点击按钮时，突然出现了一块内容。无论是以一种增加意外点击几率的方式加载广告，还是在加载图片时文本向下移动，内容的意外移动都会让人非常不舒服。

前端监控的异常

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

image.png

  • 异常指标：请求成功率=请求成功数/(请求成功数＋请求失败数)
  • JS错误：在页面运行时发生的Js错误会严重影响页面的正常渲染与交互，是前端监控的重点。
  • 白屏异常：无标准化监听方法，通常我们可以通过判断DOM树的结构来粗略的判断白屏是否发生。
    • 归因：
      • 发生Js 错误导致关键资源渲染失败。
      • 请求异常或静态资源加载失败。
      • 长时间的Js线程繁忙阻塞渲染任务。

实战

封装用于监听性能指标与前端异常的监听器

  • 原理：利用Perfomance和PerformanceObserver可以监控到一些标准的渲染性能数据

封装一个有完整上报能力的 sdk

avatar
文章
阅读
粉丝