> ## Documentation Index
> Fetch the complete documentation index at: https://docs.molesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# RUM 性能

> 看应用的 Core Web Vitals 处在什么位置、哪些页面慢、慢的值由什么构成，页面加载了什么、什么阻塞了主线程，以及一次页面浏览是怎样加载的。

**用户体验 → 性能** 说明浏览器应用的页面对打开它们的人表现如何。它一次只看一个应用，在一个环境或全部环境里，所看时间范围内的情况。Core Web Vitals 由[浏览器 SDK](https://docs.molesignal.com/zh-Hans/rum/browser-sdk.md) 测量，所以从别处发送数据的应用没有页面加载可以评级，页面会说明这一点。

这个标签有三个视图，在标签下面：**Web Vitals**、**资源** 和 **长任务**。它们共用应用、环境和时间范围，从一个跳到另一个会带上应用和环境。[资源](#资源) 之前的内容都是 Web Vitals 的。

## Vitals 处在什么位置

一句话说清有多少次页面浏览，以及 LCP、INP、CLS 在第 75 百分位处在什么位置，每项用它评级的颜色。下面是五项指标：三项 Vitals，加上排在它们前面的两项，首次内容绘制（FCP）和首字节时间（TTFB）。点选其中一项，图表、各等级占比和表格就都看这一项。所选的项写在地址里（`vital`），所以视图可以分享。

指标按 web.dev 给出的线评级，所有应用都一样。

| 指标 | 良好 | 待改进 | 差 |
| - | - | - | - |
| **LCP**，最大内容绘制 | 不超过 2.5 s | 2.5 s 到 4 s | 超过 4 s |
| **INP**，下一次绘制的交互延迟 | 不超过 200 ms | 200 ms 到 500 ms | 超过 500 ms |
| **CLS**，累计布局偏移 | 不超过 0.1 | 0.1 到 0.25 | 超过 0.25 |
| **FCP**，首次内容绘制 | 不超过 1.8 s | 1.8 s 到 3 s | 超过 3 s |
| **TTFB**，首字节时间 | 不超过 0.8 s | 0.8 s 到 1.8 s | 超过 1.8 s |

## 随时间的变化

所选指标在时间范围内每一段的第 75 百分位。两条虚线标出它从良好转为待改进、再转为差的位置。在图上拖选，可以缩小时间范围。

## 各等级的浏览

每项指标一根条，把测到它的浏览分成良好、待改进和差，良好的份额在条的末端。所选的指标用文字说出三个份额，以及各有多少次浏览和切分它的线。份额是值不超过某条线的浏览数，是数出来的，不是估算。

## 页面和其他维度

表格列出一个维度里浏览最多的值：浏览量，每项指标的第 75 百分位（用它评级的颜色），以及所选指标良好的浏览占比。

* **按** 选择维度：页面（`view.url_path_group`）、浏览器、操作系统、设备、国家或地区、版本。
* 表格读取浏览最多的 50 个值，给列排序是在这些值里排序。点击列头按它排序，再点一次反向。按某项指标排序时，它成为所选指标。
* 浏览不足 30 次的值是灰色的，按指标排名时留在最后：几次浏览说明不了一个页面有多快。
* 可以按值里的词缩小表格。维度、排序和词都在地址里。

## 一个值由什么构成

点击一行，在抽屉里打开这个值的浏览。地址里带着这个值和指标，所以抽屉可以从地址再次打开。**在探索中查看**用同样的视图打开探索。在头部切换 LCP、INP 和 CLS。对页面或版本，**为它建告警** 在规则编辑器里打开当前标签页的那项 vital，并收窄到这一行的页面或版本；需要 `alerts.manage`。见 [RUM 告警](https://docs.molesignal.com/zh-Hans/rum/alerts.md#从页面告警)。

* 第一行说这个值的指标处在什么位置、统计了多少次浏览。LCP 和 INP 还会说出最长的一段。
* **由什么构成**（LCP 和 INP）是一根条，画出这项指标经过的各段，以及每段用了多久。LCP 的各段是首字节时间、图片开始加载前的延迟、加载它的时间、以及把它画出来之前的延迟。INP 的各段是处理函数开始前的延迟、它们运行的时间，以及等下一帧的时间。每段取落在这个值第 75 百分位上下 10% 内的浏览的平均，所以各段加起来约等于这项指标。只有部分段的条会让人以为它加得起来，所以浏览没有报全各段的值没有这根条。CLS 是分数，没有各段。
* **元素** 是最后画出的（LCP）、被操作的（INP）或挪动的（CLS）元素，以及它出现在多少次浏览里和第 75 百分位。LCP 的元素旁边显示图片或视频的文件。点一行，用含这个元素的视图打开探索。
* **随时间的变化** 是同一张图，只看这个值。
* **最差的浏览** 是指标最高的五次浏览。每一次可以在探索中打开，它的会话可以完整打开。

按 <kbd>Esc</kbd> 或点抽屉外面关闭它。

## 资源

**资源**（`/rum/performance/resources`）说明页面加载了什么。一句话说清页面发出了多少次请求、第 75 百分位用了多久、有多少失败（错误状态码，或没有响应），以及每次页面浏览平均请求了多少个资源、多少字节。

表格列出请求的分组，请求最多的在前，每组有请求数、耗时和大小的第 75 百分位、失败的占比，以及来自缓存的占比。

* **按** 选择一组是什么：主机和请求类型（默认）、主机和路径、类型、协议、交付方式，或是否阻塞渲染。
* **类型** 和 **状态** 缩小请求范围（状态有：400 到 499 的客户端错误、500 以上的服务端错误、没有响应），搜索把请求缩小到地址里含这些词的请求。缩小范围的条件同时作用于表格和它旁边的面板。
* 表格读取请求最多的 100 个分组，给列排序是在这些分组里排序。请求不足 30 次的分组是灰色的，按请求数以外的列排名时留在最后。
* 失败占比 1% 起是橙色，5% 起是红色。没有说明交付方式的请求，缓存占比显示短横。

点击一行，在表格旁打开面板。地址里带着这个分组，所以面板可以从地址再次打开。

* 第一行说第 75 百分位处在什么位置、有多少失败、哪一段最长。
* **耗时走势** 是这个分组在时间范围内每一段的第 75 百分位。
* **请求的各段** 是一根条，画出第 75 百分位上下的请求把时间花在了哪里：重定向、DNS、连接、TLS、首字节时间和下载。每段取落在第 75 百分位上下 10% 内的请求的平均。
* **状态码** 列出这个分组的状态码，最多的在前，以及它们占说明了结果的请求的份额。
* **最慢的请求** 是用时最长的三个。每个都会打开发出它的视图的加载，并选中这个请求。
* 请求带有 trace id 时，一行说有多少带着，并用这个分组的请求打开探索。

## 长任务

**长任务**（`/rum/performance/long-tasks`）说明什么阻塞了页面的主线程。一句话说清运行了多少个长任务、有多少页面浏览至少遇到一个，以及长任务运行和阻塞输入的时间在第 75 百分位是多久。

表格列出长任务的分组，最多的在前，每组有长任务数、在多少次浏览里，以及运行时间和阻塞输入时间的第 75 百分位。时间 100 ms 起是橙色，200 ms 起是红色。

* **按** 选择一组是什么：长任务归因到的脚本和函数（默认）、页面、版本，或长任务的触发方式。搜索把长任务缩小到脚本地址里含这些词的。
* 上报长动画帧的浏览器会说出其中运行的脚本，MoleSignal 把长任务归因到运行最久的那个脚本（见[MoleSignal 补充的内容](https://docs.molesignal.com/zh-Hans/rum/events.md#molesignal-补充的内容)）。Safari 和 Firefox 只报告长任务本身，不带脚本；派生脚本之前收到的长任务也没有脚本。它们合为一组，**未归因**，和其他组一样计数。
* 和资源一样，长任务不足 30 个的分组是灰色的，排名时留在最后。

点击一行，打开面板：这组长任务是怎样触发的、出现在哪些页面，以及最长的三个。最长的每一个都会打开它所阻塞的视图的加载，并在主线程上选中这个长任务。

## 视图的加载

浏览器的视图在探索的抽屉里先打开 **加载瀑布**，它的字段在下一个分区。抽屉可以从探索的一行打开，也可以从上面最慢的请求和最长的长任务打开。

* 一句话说清页面用了多久加载完、首字节何时到、最大绘制用了多久以及画的是什么，以及视图有多少资源和长任务。
* 时间轴从视图开始算起，到页面加载完后结束。线标出首字节、首次绘制和最大绘制、文档就绪和加载结束。最大绘制所等待的文件会标明。
* **主线程** 在同一条时间轴上画出长任务。阻塞首次绘制的请求会标明。
* 每个请求一行，按发起的先后排列。条从发起画到结束，并在首字节到达处切开：之前是等待，之后是下载。先显示前十五个，其余折叠成一行，说有多少个、多数用了多久。页面加载之后才发起的请求在单独一行里计数。**类型** 和 **显示**（阻塞、慢于 500 ms、失败）缩小显示的行。
* 点击一个请求，或主线程上的一个长任务，在右侧打开它：它是什么、怎样结束、多大、怎样交付、时间花在哪里，以及它加入的链路。最大绘制所等待的文件，面板还会说绘制等了多久才开始、多久才加载完、又等了多久才画出来。从别的页面打开的请求若是在页面加载之后才发起的，不在时间轴上，面板会说明。

移动应用的界面没有页面可加载，所以它的抽屉只显示字段。

## 数字怎样统计

Web Vitals 的每个数字都由 [`/api/v1/rum/aggregate`](https://docs.molesignal.com/zh-Hans/api/rum#度量行) 对 `rum_views` 里匹配的行统计得出，所以随变化再次上报的视图只按最新版本计一次。资源的数字对 `rum_resources` 统计，长任务的数字对 `rum_long_tasks` 统计，浏览份额则对 `rum_views` 统计。统计耗时超过时间预算的卡片会说明原因，其他卡片不受影响：缩小时间范围再读一次。视图的加载按它的 id，在它加载的时间段里读取请求和长任务。

元素、各段和最差的浏览来自 SDK 随每项指标一起上报的归因（见[事件格式](https://docs.molesignal.com/zh-Hans/rum/events.md#视图)里 `view.performance` 的字段）。浏览器没有测到的，对应的视图就没有这些内容。

这个页面需要读取 RUM 其他页面所需的权限 `streams.query`。见 [RUM](https://docs.molesignal.com/zh-Hans/rum#权限)。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.