前端与HTML青训营笔记

苏珩
61 阅读5分钟

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

前端监控SDK

什么是前端监控

前端监控就是尽可能地采集这一过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费。

4E4FCBAB455AE79173E5DF9208C0675A.png

为什么需要前端监控

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

前端监控了什么

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

重要指标：

  • 可交互性
    • 卡顿监控
    • 请求性能
  • 服务稳定性
    • 请求成功率
  • 加载速度
    • 首屏性能
  • 可用性
    • 渲染错误/白屏
    • 请求错误
    • JS错误
    • 静态资源错误
  • 业务数据
    • PV/UV
    • 自定义事件/打点

常用性能指标概述

Web性能标准的诞生

Web Server<——>www<——>Client

早期网页是纯静态的，但随着Web爆发式发展，页面交互越来越复杂。开发者开始思考如何提高Web性能、改善用户体验。

因此，2010年8月，W3C成立了Web性能工作组，由来自Google和Microsoft的工程师担任主席，目标是制定衡量Web应用性能的方法和APl。

随后，Web性能工作组开始制定一系列Web性能标准，应用到桌面和移动浏览器以及其他环境中，帮助Web开发人员评估和理解应用的性能特征。

传统的性能指标

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

98491ECDE2499D5CD7FF27CCCED7AED5.png

CD7E07EB27588B7F079730C381995C0C.png

以用户为中心的性能指标

专注于用户视角下的浏览体验

  • FP (FirstPaint):首次渲染的时间点。FP 时间点之前，用户看到的都是没有任何内容的白色屏幕。
  • FCP (First Contentful Paint):首次有内容渲染的时间点。
  • FMP (First Meaningful Paint):首次绘制有意义内容的时间点。
  • TT (Time to Interactive):测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。
    • TTI反映页面可用性的重要指标。TTI值越小，代表用户可以更早地操作页面，用户体验就更好。
  • SI (Speed Index):衡量页面可视区域加载速度，帮助检测页面的加载体验差异。
  • FID (First Input Delay):测量从用户第一次与页面交互(比如当他们单击链接、点按按钮等等)直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间。
  • LCP(Largest Contentful Paint):最大的内容在可视区域内变得可见的时间点。
    • 优点：
      1. 容易理解
      2. 给出与FMP相似的结果
      3. 容易计算和上报

7E816660B7F37943E5EA12C180DBFF40.png

FDA5C0122405F65F953522A40164AD90.png

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

3A12A1C444404395519AA148ED9932FB.png

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

前端常见错误

静态资源错误

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

请求异常

Http请求状态码分类：

  • 100-199——> 信息响应
  • 200-299——>成功响应
  • 300-399——>重定向消息
  • 400-499——>客户端错误响应
  • 500-599——>服务端错误响应
  • 请求异常=请求响应状态码>= 400

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

状态码0是什么?
XMLHttpRequests被停止
如果你的XMLHttpRequest收到status=0和statusText=null的返回，这意味着请求无法执行。就是无法发送。一个可能导致的原因是当XMLHttpRequest origin (创建的XMLHttpRequest)改变时，XMLHttpRequest执行open() 。这种情况是可能发生的，举个例子，我们在一个窗口的onunload事件中关闭XMLHttpRequest,但实际上在即将关闭窗口时，之前创建的XMLHttpRequest仍然在那里，最后当这个窗口失去焦点、另一个窗口获得焦点时，它还是发送了请求(也就是open())。最有效的避免这个问题的方法是为新窗口的activate事件设置一个监听器，一旦窗口关闭， 它的unload (en-US). 事件便触发。

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

JS错误

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

白屏异常

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

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

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