监控——前端性能监控方案

性能指标：

自动上报标准web性能指标。指标定义如下：

• DomContentloaded 事件
• onload 事件
• FP(First Paint：首次渲染时间)
• FCP(First Contentful Paint：首次内容绘制)
• FMP(First Meaningful Paint：首次渲染关键内容绘制)
• LCP（Largest Contentful Paint：最大内容绘制）
• FID（First Input Delay：首次输入延迟）
• SI (Speed Index：速度指数)
• CLS (Cumulative Layout Shift：累计布局偏移)
• TTI(Time to Interactive：可交互时间)
• TBT(Total Blocking Time：总阻塞时间)
• TTFB(Time to First Byte：首字节时间)
• FPS：实时帧率监测

数据方案

首选方案：PerformanceObserver

w3c规范：https://w3c.github.io/performance-timeline/#introduction（22.07.22）

兼容性方案：
PerformanceNavigationTiming（Navigation Timing 规范已废弃）

w3c规范：https://w3c.github.io/navigation-timing/#abstract （22.06.17）

指标方案

分为以下两个部分

• 针对性指标
• 标准指标（web核心指标）

针对指标

帧率监测：

FrameTiming API
可以用来监测帧率，目前尚在草案阶段
参考：

• https://developer.chrome.com/blog/frame-timing-api/ chrome开发者文档
• https://wicg.github.io/frame-timing/ w3c草案
• https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceEntry mdn文档

由于当前FrameTiming API并未成为正式规范，但已有草案规范
因此数据格式遵照FrameTiming API 规范。数据规范如下：

• name：This attribute MUST return the [current document’s address][].
• entryType：This attribute MUST return the [DOMString][] “frame”.
• startTime：This attribute MUST return a [DOMHighResTimeStamp][] [HR-Time-2] indicating the frame start time.
• duration：This attribute MUST return a [DOMHighResTimeStamp][] indicating the difference between the startTime’s of two successive frames.

拓展字段：
cpuTime：当前帧率

核心指标

核心 Web 指标是适用于所有网页的 Web 指标子集，一般来说，指标构成侧重于用户体验的三个方面——加载性能、交互性和视觉稳定性
为了对页面或网站的整体性能进行分类，我们取该页面或网站的所有页面浏览量的第 75 个百分位数。换句话说，如果一个网站有至少 75% 的页面浏览量达到"良好"阈值，则该网站在这项指标下就会被归类为性能"良好"。

• Largest Contentful Paint (LCP) ：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5 秒内发生。
• First Input Delay (FID) ：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为100 毫秒或更短。
• Cumulative Layout Shift (CLS) ：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在 0.1. 或更少。

计算方案

CLS指标

Cumulative Layout Shift (CLS) 是衡量网页视觉稳定性的指标。该指标称为累积布局移位，因为每个单独移位的分数都会在页面的整个生命周期中求和。

采用会话窗口，所有会话窗口的最大分数，用于较小的会话窗口（上限为 5 秒，它们之间有 1 秒的间隔）。

因此计算约定如下：

• 采用最大会话窗口，而非累计窗口，以避免对长存页面产生的不公平
• 对近期用户操作导致的layoutshift不予计算，因为这是正常现象
• 设置会话窗口上限为五秒，间隔超过一秒则不认为为同一窗口

非活动状态及页面缓存处理：

• 进入非活动状态时，进行一次强制上报，且不关闭监听器
• 从页面缓存进入后重新统计CLS值

指标参考：

• https://web.dev/evolving-cls/?utm_source=devtools
• https://web.dev/better-layout-shift-metric/#windowing-strategies
• https://web.dev/optimize-cls/
• https://web.dev/debug-layout-shifts/
• https://web.dev/cls/ （旧版）
• https://wicg.github.io/layout-instability/#sec-layout-shift

FCP指标

首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标，"内容"指的是文本、图像（包括背景图像）、 元素或非白色的元素。
为了提供良好的用户体验，网站应该努力将首次内容绘制控制在1.8 秒或以内。

计算约定如下：

• 当PerformancePaintTiming可以取到时优先获取该值
• 该指标仅获取一次，监听到值后立即断开连接
• 该指标仅在前台渲染时获取有意义，如果页面在非活动状态渲染完成（预渲染）则不记录该指标
• 读取页面缓存时，应该以读取页面缓存所花费的时间（用户体感）作为该指标

指标参考：

• https://web.dev/evolving-cls/?utm_source=devtools
• https://web.dev/optimize-lcp/

LCP指标

最大内容绘制 (LCP) 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。网页通常是分阶段加载的，因此，页面上的最大元素也可能会发生变化。

以下为触发时机：

• 浏览器会在绘制第一帧后立即分发一个PerformanceEntry
• 在渲染后续帧之后，浏览器会在最大内容元素发生变化时分发另一个PerformanceEntry

在以下时机上报：

• 页面关闭、切入后台等时机。认为本次渲染已结束可以统计出LCP
• 发生用户操作。因为用户操作导致的界面变动是符合预期的，不影响该评分指标
• 读取BFCache时，此时页面内容已存在，可以在渲染完成后拿到LCP

指标参考：

• https://web.dev/lcp/
• https://github.com/GoogleChrome/web.dev/blob/main/src/site/content/zh/metrics/lcp/index.md

FID

FID 测量从用户第一次与页面交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自

INP与FID区别：
在 INP 考虑所有页面交互的情况下，首次输入延迟 (FID)仅考虑首次交互。它也只测量第一次交互的输入延迟，而不是运行事件处理程序所花费的时间，或者呈现下一帧的延迟。

鉴于 FID 也是一个加载响应指标，其背后的基本原理是，如果在加载阶段与页面进行的第一次交互几乎没有或没有可察觉的输入延迟，那么该页面就会给人留下良好的第一印象。

INP 不仅仅是关于第一印象。通过对所有交互进行抽样，可以全面评估响应性，使 INP 成为比 FID 更可靠的整体响应性指标

指标参考：

• https://web.dev/fid/
• https://web.dev/better-responsiveness-metric/
• https://web.dev/inp/
• https://web.dev/better-responsiveness-metric/
• https://web.dev/optimize-fid/

TTFB指标

TTFB 是衡量资源请求与响应的第一个字节开始到达之间的时间的度量。

TTFB 是以下请求阶段的总和：

• 重定向时间
• Service Worker 启动时间（如果适用）
• DNS 查询
• 连接和 TLS 协商
• 请求，直到响应的第一个字节到达
• 减少连接建立时间和后端的延迟将有助于降低 TTFB。

指标参考：
https://web.dev/ttfb/

TBT指标

总阻塞时间 (TBT) 指标测量First Contentful Paint 首次内容绘制 (FCP)与Time to Interactive 可交互时间 (TTI)之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。

指标参考：
https://web.dev/tbt/

TTI指标

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

计算方案

• 先进行First Contentful Paint 首次内容绘制 (FCP)。
• 沿时间轴正向搜索时长至少为 5 秒的安静窗口，其中，安静窗口的定义为：没有长任务且不超过两个正在处理的网络 GET 请求。
• 沿时间轴反向搜索安静窗口之前的最后一个长任务，如果没有找到长任务，则在 FCP 步骤停止执行。
• TTI 是安静窗口之前最后一个长任务的结束时间（如果没有找到长任务，则与 FCP 值相同）。

指标参考：
https://web.dev/tti/

衡量标准

数据区分

如何对指标进行测量性能指标一般通过以下两种方式来进行测量：

• 在实验室中：使用工具在稳定、受控的环境中模拟页面加载
• 在实际情况中：基于真实用户的实际页面加载与页面交互。这种类型的测量通常被称为真实用户监控，或简称为 RUM。
  这两个选项没有优劣之分，事实上，通常会需要同时使用这两个方式来确保良好的性能。

指标参考：

• https://web.dev/vitals/
• https://web.dev/performance-scoring/
• https://web.dev/defining-core-web-vitals-thresholds/
• https://web.dev/user-centric-performance-metrics/#in-the-lab