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

星倦756
57 阅读5分钟

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

一、开篇：为什么我们要聊前端监控

什么是前端监控

从一个经典面试题聊起 在浏览器里，从输入URL到页面展示，这中间发生了什么？

image-20230207142948098.png

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

为什么需要前端监控

用户视角：

  • 这个网页打开好慢啊
  • 为什么这个网页会这么卡
  • 怎么网页的图片全都裂开了
  • 这个网页怎么是百花花的一片什么都没有

当具备前端监控的能力：

  • 打开好慢 —— 页面某个关键资源渲染太慢。
  • 交互卡顿 —— 页面同步计算任务太重，阻塞渲染
  • 资源加载失败 —— 客户端网络状态差，或上游服务节点异常
  • 页面白屏 —— 页面脚本执行失败，关键资源加载失败、请求失败等

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

前端监控到底监控了什么

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

image-20230207143543199.png

二、概述：前端监控之常用性能指标

web性能标准的诞生

  • 早期网页是纯静态的，但随着Wb爆发式发展，页面交互越来越复杂。开发者开始思考如何提高Web性能、改善用户体验。
  • 因此，2010年8月，W3C成立了Web性能工作组，由来自Google和Microsoft的工程师担任主席，目标是制定衡量Web应用性能的方法和API。
  • 随后，Web性能工作组开始制定一系列Web性能标准，应用到桌面和移动浏览器以及其他环境中，帮助Wb开发人员评估和理解应用的性能特征。

传统的性能指标

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

image-20230207143843977.png

image-20230207143857545.png

以用户为中心的性能指标

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

image-20230207144140142.png

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

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

image-20230207144309264.png

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

最大的元素，例如一篇文章中的一大段文字或产品页面上的一张图片，大概就是让你 理解页面内容的最有用的元素。

LCP优点：

1.容易理解

2.给出与FMP相似的结果

3.容易计算和上报

三、慨述：前端监控前端常见异常之厅

静态资源错误

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

请求异常

请求异常=请求响应状态码>=400 对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常

请求成功率=请求成功数/（请求成功数+请求失败数）

白屏异常

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

监听到白屏发生后，我们还需要对白屏的发生进行归因。 通常导致白屏发生的原因可能有如下几点：

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