前端监控学习|青训营笔记

KIKI37
116 阅读5分钟

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

一、本堂课重点内容： 0c818aec26eb1eee8ce59d4038461fd.png

二、详细知识点介绍：

  • 前端监控

    • 前端监控的定义

      前端监控就是采集输入URL到页面展示这一过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台的行为

    • 前端监控的意义

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

      • 例子

        打开好慢 —— 页面某个关键资源渲染太慢。

        交互卡顿 —— 页面同步计算任务太重，阻塞渲染。

        资源加载失败 —— 客户端网络状态差，或上游服务节点异常。

        页面白屏 —— 页面脚本执行失败、关键资源加载失败、请求失败等。

    • 前端监控的对象

      1）性能指标

      2）异常事件

      3）用户行为

      • 重要指标 7d28a8211ea0deb15cc376dc7765acb.png

  • 前端监控具体之性能指标

    • 性能指标的诞生缘由

      随着Web爆发式发展，页面交互越来越复杂，为了提高Web性能以及改善用户体验等问题，Web性能工作组制定了一系列Web性能标准，帮助Web开发人员评估和理解应用的性能特征

    • 类型

      • 传统性能指标

        传统的性能指标主要依赖Navigation Timing或者Navigation Timing 2，通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。

        弊端：只关心技术细节，忽略了用户体验

      • 以用户为中心的性能指标 4efe3beb6a49cc9670374d31d99bd91.png

        • 具体指标分析

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

          FCP（First Contentful Paint）： 首次有内容渲染的时间点

          FMP（First Meaningful Paint）：首次绘制有意义内容的时间点

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

          TTI反映页面可用性的重要指标，TTI 值越小，代表用户可以更早地操作页面，用户体验就更好（用户等待时间更短）

          SI（Speed Index）：衡量页面可视区域加载速度，帮助检测页面的加载体验差异逐渐加载内容比突然加载效果要更好 7275402ad9911dd120afbad7f81c5a4.png

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

          LCP（Largest Contentful Paint）：最大的内容在可视区域内变得可见的时间点

          优点：

1）容易理解

2）可以给出与FMP相似的结果

3）容易计算和上报

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

          量度：50ms，超过50ms为长任务（用户忍耐的最长时间）

一个页面的TBT，是从FCP到TTI之间所有长任务的阻塞时间的总和（渲染到可以交互）

          CLS（Cumulative L ayout Shift）：量化了在页面加载期间，视口中元素的移动程度（元素突然的偏移越少越好）

  • 前端监控具体之常见异常

    • 静态资源错误

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

    • 请求异常

      更多基于HTTP协议进行监控

      Http请求状态码分类

      100 - 199 —— 信息响应

200一299 —— 成功响应

300 - 399 —— 重定向消息

400 - 499 —— 客户端错误响应

500 - 599 —— 服务端错误响应

请求异常=请求响应状态码>= 400

对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常

请求成功率=请求成功数/ (请求成功数 +请求失败数)

    • Js错误

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

    • 白屏异常

      白屏异常没有标准化的监听方法。通常可以通过判断DOM树的结构来粗略的判断白屏是否发生

      发生缘由：

      1）发生Js错误导致关键资源渲染失败

2）请求异常或静态资源加载失败

3）长时间的Js线程繁忙阻塞渲染任务

  • 前端监控具体之实战

    • 性能指标监控

      原理：利用浏览器提供的标准对象，如Performance 或 PerformanceObserver

    • JS错误监控

      原理：利用window.addEvent istener的error和unhandledrejection可以监控到全局的js错误

    • 静态资源监控

      利用window.addEventL istener的error事件可以监控到静态资源错误，与JS是同一套方案监听，需要区分错误

      区分点：

      1）静态报错，属性会有特征

    target有值是静态，为空不是静态
    
2）target继承于HTMLElement 

    通过link或script标签创建的静态资源

3）静态资源错误只能在捕获阶段获取

      区分目的：能够更好，更细致的整合上报数据

    • 请求异常监控

      通过hook xhr和fetch对象来监听请求时发生的错误

三、引用参考：

  • 文章中性能指标部分中图片参考引用于「前端监控 SDK 开发」第五届字节跳动青训营 - 前端专场 课程
avatar
文章
阅读
粉丝