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

课程笔记

前端监控简介

什么是前端监控

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

为什么需要前端监控

从用户的视角来看，当我们在浏览网页时，时常会碰到如下一些问题：

• 网页打开慢
• 网页变卡
• 网页图片无法显示（裂开）
• 网页什么都没有（白屏）

等等这一系列的问题都是我们开发人员需要来发现并解决的。这些监控页面质量的工作就是由前端监控人员来进行的。

监控页面质量为什么那么重要？

研究表明，性能不佳会对业务目标产生负面影响。例如：

• BBC发现他们的网站加载时间每增加一秒，他们就会失去10%的用户。

• 缤趣（图片社交分享网站）将感知等待时间减少了40%，这将搜索引擎流量和注册量增加了15%。
• COOK（冷冻速食订购网站）将页面平均加载时间减少了850毫秒，从而将转化次数提高了7%，跳出率降低了7%，并将每个会话的页面增加了10%。

前端监控到底监控了什么

前端监控主要监控三方面：

• 性能指标
• 异常事件
• 用户行为

前端监控之常用性能指标

Web性能标准的诞生

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

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

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

传统的性能指标

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

以用户为中心的性能指标

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

常见的以用户为中心的性能指标有如下几个：

• FP（First Paint）

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

• FCP（First Contentful Paint）

  首次有内容渲染的时间点。

• FMP（First Meaningful Paint）

  首次绘制有意义内容的时间点。

• TTI（Time to Interactive）

  测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。
  TTI是反映页面可用性的重要指标。TTI值越小，代表用户可以更早地操作页面，用户体验就更好。

• SI（Speed Index）：

  衡量页面可视区域加载速度，帮助检测顶面的加载体验差异。

• FID（First Input Delay）：

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

以下三个为衡量用户体验过程的性能指标：

• LCP (Largest Contentful Paint)

  最大的内容在可视区域内变得可见的时间点。 最大的元素，例如一篇文章中的一大段文字或产品页面上的一张图片，大概就是让你理解页面内容的最有用的元素。 LCP优点：

  • 容易理解
  • 给出与FMP相似的结果
  • 容易计算和上报

• TBT (Total Blocking Time)

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

• CLS (Cumulative Layout Shift) 量化了在页面加载期间,视口中元素的移动程度。
  当我们点击按钮时，突然出现了一块内容。无论是以一种增加意外点击几率的方式加载广告，还是在加载图片时文本向下移动，内容的意外移动都会让人非常不舒服。

前端监控之前端常见异常

在前端开发中常见的异常有：静态资源错误、请求异常、JS错误、白屏异常。

静态资源错误

静态资源即加载页面所需的html、 csS和js等文件，以及其他各类多媒体文件如图片、音频和视频等。

静态资源错误:在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。

请求异常

根据之前所学，在HTTP协议中我们通过状态码来识别网络请求过程中的情况，常见的HTTP请求状态码有如下这几个：

• 100-199：信息响应
• 200-299：成功响应
• 300-399：重定向响应
• 400-499：客户端错误响应
• 500-599：服务端错误响应

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

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

状态码0表示什么?

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

JS错误

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

我们可以利用window.addEventListener的error和unhandledrejection监控到全局的js错误。

白屏异常

白屏异常就是我们有时浏览网页会看到的网页打开后显示空白的页面，无法正常显示内容。

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

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

总结

通过本次课程，大致前端监控技术有了一定的了解，从性能标准到异常，学习到了很多的前端监控知识，在今后的代码开发里我们要多加留意自己所编写的东西是否存在性能差或者用户体验差的问题，多使用Web防御工具来提高项目的安全性。