性能功能参考

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

本页面是与性能分析相关的 Chrome 开发者工具功能的全面参考。

有关如何使用 Chrome 开发者工具分析页面性能的指导教程，请参阅分析运行时性能入门。

录制表现

您可以记录运行时或加载性能。

记录运行时性能

当您想分析网页运行时（而非加载）的性能时，请记录运行时性能。

  1. 转到您要分析的网页。
  2. 点击开发者工具中的性能标签页。

  3. 点击 Record（录制）图标 记录。。

    记录。

  4. 与网页互动。开发者工具会记录因您的互动而发生的所有页面活动。

  5. 再次点击录制，或点击停止以停止录制。

记录加载性能

如果您想分析网页加载（而非运行时）的性能，请记录加载性能。

  1. 转到您要分析的网页。
  2. 打开开发者工具的性能面板。

  3. 点击 Start profiling and load page 图标 开始分析并重新加载页面。。首先，开发者工具会前往 about:blank，以清除所有剩余的屏幕截图和跟踪记录。然后，开发者工具会在页面重新加载时记录性能指标，然后在加载完成后几秒钟自动停止记录。

    重新加载页面。

开发者工具会自动放大记录中大多数活动发生的部分。

网页加载录音。

在此示例中，Performance 面板会显示网页加载期间的活动。

录制时截取屏幕截图

选中屏幕截图复选框，即可在录制过程中截取每一帧的屏幕截图。

“屏幕截图”复选框。

请参阅查看屏幕截图，了解如何与屏幕截图互动。

记录时强制进行垃圾回收

在记录页面时，点击 Collect cart（收集垃圾）拖地以强制进行垃圾回收。

回收垃圾。

显示录制设置

点击 Capture settings 图标 拍摄设置。，即可显示与开发者工具如何捕获性能记录相关的更多设置。

“摄趣设置”部分。

停用 JavaScript 示例

默认情况下，记录的主轨道会显示记录期间所调用的 JavaScript 函数的详细调用堆栈。如需停用这些调用堆栈，请执行以下操作：

  1. 打开拍摄设置 设置。 菜单。请参阅显示录制设置。
  2. 选中停用 JavaScript 示例复选框。
  3. 录制网页。

以下屏幕截图显示了停用和启用 JavaScript 示例之间的区别。停用采样时，记录的主轨迹较短，因为它省略了所有的 JavaScript 调用堆栈。

停用 JS 样本时的记录示例。

本示例展示了一个包含已停用 JS 示例的记录。

启用 JS 示例时的记录示例。

本示例展示了一个包含已启用 JS 示例的记录。

录制时限制网络带宽

如需在录制时限制网络流量，请执行以下操作：

  1. 打开拍摄设置 设置。 菜单。请参阅显示录制设置。
  2. 将网络设置为所选的节流级别。

记录时限制 CPU 占用率

如需在记录期间限制 CPU 占用率，请执行以下操作：

  1. 打开拍摄设置 设置。 菜单。请参阅显示录制设置。
  2. 将 CPU 设置为所选的节流级别。

限制是相对于计算机功能而言的。例如，2 倍减速选项会使 CPU 的运行速度比平时慢 2 倍。开发者工具无法真正模拟移动设备的 CPU，因为移动设备的架构与桌面设备和笔记本电脑的架构截然不同。

启用高级绘制插桩

如需查看详细的绘制插桩，请执行以下操作：

  1. 打开拍摄设置 设置。 菜单。请参阅显示录制设置。
  2. 选中 Enable Advanced Paint Instrument 复选框。

如需了解如何与绘制信息交互，请参阅视图层和视图绘制分析器。

模拟硬件并发

如需使用不同数量的处理器核心来测试应用性能，您可以配置 navigator.hardwareConcurrency 属性报告的值。某些应用会使用此属性来控制其应用的并行程度，例如控制 Emscripten pthread 池大小。

如需模拟硬件并发，请执行以下操作：

  1. 打开拍摄设置 设置。 菜单。请参阅显示录制设置。
  2. 选中硬件并发，然后在输入框中设置核心数。 硬件并发。

开发者工具会在 Performance 标签页旁边显示警告图标 警告。，提醒您已启用硬件并发模拟。

如需还原为 10 的默认值，请点击还原 还原。 按钮。

保存记录

如需保存录音，请右键点击并选择 Save Profile（保存个人资料）。

保存个人资料。

加载录音

如需加载录音，请右键点击并选择 Load Profile。

加载配置文件。

清除之前的录音

录制后，按 Clear recording 图标 清除录制内容。 可从 Performance 面板中清除该记录。

清除录制内容。

分析性能记录

在您记录运行时性能或记录加载性能后，性能面板会提供大量数据，用于分析刚刚发生的情况的性能。

如需仔细检查性能记录，您可以选择记录的一部分、滚动长火焰图、放大和缩小，以及使用面包屑导航在不同缩放级别之间切换。

选择录音内容的一部分

在性能面板的操作栏下方以及记录的顶部，您可以看到包含 CPU 和 NET 图表的时间轴概览部分。

操作栏下方的时间轴概览。

要选择录音的一部分，请点击并按住，然后在时间轴概览中向左或向右拖动。

如需使用键盘选择某一部分，请执行以下操作：

  1. 聚焦于主轨道或其任何相邻轨道。
  2. 使用 W、A、S、D 键分别可以放大、向左、缩小和向右移动。

如需使用触控板选择某个部分，请执行以下操作：

  1. 将鼠标悬停在时间轴概览部分或任何轨道（主要轨道及其邻近轨道）上。
  2. 双指向上滑动可缩小，向左滑动可向左移动，向下滑动可放大，向右滑动可向右移动。

通过时间轴概览，您可以连续创建多个嵌套面包屑导航，增加缩放级别，然后跳转到所选级别。

如需创建和使用面包屑导航，请执行以下操作：

  1. 在时间轴概览中，选择录制内容的一部分。
  2. 将鼠标悬停在所选内容上，然后点击 N 毫秒 zoom_in 按钮。所选内容将展开，以填充时间轴概览。系统会在时间轴概览顶部开始构建面包屑导航链。
  3. 重复前两个步骤，创建另一个嵌套面包屑导航。只要选择范围大于 5 毫秒，您就可以继续嵌套面包屑导航。
  4. 如需跳转到所选的缩放级别，请点击时间轴概览顶部链中的相应面包屑导航。

滚动长火焰图

如需在主轨道或其任何相邻轨道中滚动长火焰图，请点击并按住，然后向任意方向拖动，直到您要查找的内容显示出来。

如需在性能面板底部打开搜索框，请按：

  • macOS：Command + F
  • Windows、Linux：Ctrl+F

搜索框。

此示例在底部的搜索框中显示了一个正则表达式，用于查找以 E 开头的任何 activity。

如需循环切换与您的查询匹配的活动，请执行以下操作：

  • 点击 expand_less 上一步或 expand_less 下一步按钮。
  • 按 Shift + Enter 即可选择上一项，按 Enter 键可选择下一项。

效果面板会在搜索框中所选活动显示提示。

如需修改查询设置，请执行以下操作：

  • 点击 match_case：匹配大小写，使查询区分大小写。
  • 点击 regular_expression 正则表达式，即可在查询中使用正则表达式。

要隐藏搜索框，请点击取消。

查看主线程活动

您可以通过主轨道查看发生在页面主线程上的活动。

主轨道。

点击某个事件即可在摘要标签页中查看与其详情。效果面板将以蓝色勾勒所选事件。

在“Summary”标签页中详细了解主线程事件。

以下示例显示了有关 Summary 标签页中 get 函数调用事件的更多信息。

阅读火焰图

Performance 面板在火焰图中表示主线程活动。x 轴表示随时间变化的记录。y 轴表示调用堆栈。顶部的事件会导致以下事件。

火焰图。

此示例显示了 Main 轨道中的火焰图。click 事件导致了匿名函数调用。此函数反过来又称为 onEndpointClick_，其称为 handleClick_，依此类推。

Performance 面板会为脚本分配随机颜色，以分解火焰图并提高可读性。在前面的示例中，来自一个脚本的函数调用显示为浅蓝色。从其他脚本拨打的电话会显示为浅粉色。深黄色表示脚本活动，紫色事件表示渲染活动。这些深黄色和紫色事件在所有录制内容中保持一致。

系统还会使用红色三角形突出显示耗时较长的任务，并将时长超过 50 毫秒的部分用红色三角形表示：

耗时较长的任务。

在此示例中，该任务用时超过 400 毫秒，因此表示最后 350 毫秒的部分显示为红色，而最初的 50 毫秒则不是。

此外，主轨道会显示使用 profile() 和 profileEnd() 控制台函数启动和停止的 CPU 配置文件的相关信息。

如需隐藏 JavaScript 调用的详细火焰图，请参阅停用 JavaScript 示例。停用 JS 示例后，您只会看到 Event (click) 和 Function Call 等高级事件。

跟踪事件发起者

主轨道可以显示箭头，将以下发起者及其导致的事件联系起来：

  • 样式或布局失效 -> 重新计算样式或布局
  • 请求动画帧 -> 已触发动画帧
  • 请求空闲回调 -> 触发空闲回调
  • 安装计时器 -> 计时器已触发
  • 创建 WebSocket -> 发送... 和接收 WebSocket 握手或销毁 WebSocket

如需查看箭头，请在火焰图中找到一个发起者，然后点击它。

从请求到触发空闲回调的箭头。

在表格中查看活动

记录网页后，您无需仅依赖“主要”轨道来分析活动。 开发者工具还提供三个表格视图，用于分析活动。每种视图都以不同的视角分析活动：

为了帮助您更快找到要查找的内容，所有这三个标签的过滤栏旁都提供了高级过滤按钮：

  • match_case：匹配大小写。
  • regular_expression 正则表达式。
  • match_word 匹配整个字词。

用于高级过滤的三个按钮。

“性能”面板中的每个表格视图都会显示活动（例如函数调用）的链接。为了帮助您进行调试，开发者工具会在源文件中查找相应的函数声明。此外，如果存在并启用了相应的源映射，则开发者工具会自动查找原始文件。

点击链接即可在来源面板中打开源文件。

指向“事件日志”标签页中的源文件的链接。

根 activity

本文介绍了调用树标签页、Bottom-Up 标签页和事件日志部分中提到的根 activity 概念。

根 activity 是指会导致浏览器执行某些工作的 activity。例如，当您点击某个网页时，浏览器会触发一个 Event activity 作为根 activity。然后，该 Event 可能会导致处理程序执行。

在主轨道的火焰图中，根活动位于图表顶部。在 Call Tree 和 Event Log 标签页中，根 activity 是顶层项。

有关根 activity 的示例，请参阅“调用树”标签页。

“调用树”标签页

您可以使用调用树标签页查看哪些根 activity 导致的工作量最大。

Call Tree 标签页仅显示录制的选定部分中的活动。如需了解如何选择部分，请参阅选择记录的一部分。

“调用树”标签页。

在此示例中，Activity 列中项的顶层（例如 Event、Paint 和 Composite Layers）是根 activity。嵌套表示调用堆栈。在此示例中，Event 导致 Function Call，而 button.addEventListener 又导致 b，依此类推。

自用时间表示直接在相应活动中花费的时间。总时间表示该 activity 或其任何子级上花费的时间。

点击自用时间、总时间或活动，按该列对表格进行排序。

使用过滤框可按活动名称过滤事件。

默认情况下，分组菜单设置为无分组。使用分组菜单根据各种条件对活动表进行排序。

点击 Show Heaviest Stack 图标 显示执行用时最长的堆栈。，在 Activity 表格右侧显示另一个表格。点击一个活动以填充最重堆栈表。Heaviest Stack 表显示所选 activity 的哪些子项的执行时间最长。

“Bottom-Up”标签页

使用 Bottom-Up 标签页查看直接占用最多时间的活动。

Bottom-Up 标签页仅显示录制的选定部分中的活动。如需了解如何选择部分，请参阅选择记录的一部分。

“Bottom-Up”标签页。

在本例的 Main 轨道火焰图中，您可以看到几乎所有时间都花在了执行对 wait() 的三个调用上。因此，Bottom-Up 标签页中的顶部 activity 是 wait。在火焰图中，对 wait 的调用下方的黄色实际上是数千个 Minor GC 调用。因此，您可以看出，在 Bottom-Up 标签页中，费用第二高的 activity 是 Minor GC。

自用时间列表示直接在该 activity 的所有发生实例中花费的汇总时间。

总时间列显示的是该活动或其任一子活动花费的总时长。

“事件日志”标签

使用 Event Log 标签页，按活动在记录期间发生的顺序查看活动。

事件日志标签页仅显示在记录选定期间的活动。如需了解如何选择部分，请参阅选择记录的一部分。

“事件日志”选项卡。

Start Time 列表示该活动开始的点（相对于记录开始时间）。在此示例中，所选项 1573.0 ms 的开始时间表示活动在记录开始 1573 毫秒后开始。

自用时间列表示直接在该活动中花费的时间。

总时间列表示直接在该活动或其任何子活动中花费的时间。

点击开始时间、自身时间或总时间，按该列对表格进行排序。

使用过滤框可按名称过滤活动。

使用 Duration 菜单可以过滤掉所有用时不到 1 毫秒或 15 毫秒的 activity。默认情况下，Duration 菜单设置为 All，这意味着显示所有 activity。

取消选中 Loading、Scripting、Rendering 或 Painting 复选框，以滤除这些类别中的所有 activity。

查看显示时间

在“计时”轨道中，查看如下重要标记：

计时轨道中的标记。

要在摘要标签页中查看更多详细信息，请选择一个标记。要查看标记的时间戳，请将鼠标悬停在计时轨道上该标记的时间戳上。

查看互动

在“互动”跟踪上查看用户互动，跟踪潜在的响应速度问题。

如需查看互动，请执行以下操作：

  1. 打开开发者工具，例如此演示页面。
  2. 打开“性能”面板并开始录制。
  3. 点击一个元素（咖啡）并停止录制。
  4. 在时间轴中找到“Interactions”轨道。

“互动”轨道。

在此示例中，Interactions 轨道会显示 Pointer 互动。互动带有胡须，用于在处理时间范围表明输入和呈现延迟。将鼠标悬停在互动上，即可查看包含输入延迟、处理时间和展示延迟的提示。

对于时长超过 200 毫秒的互动，Interactions 轨道还会在 Summary 标签页和悬停提示中显示 Interaction to Next Paint (INP) 警告：

INP 警告。

Interactions 轨道会在右上角显示一个红色三角形，用来标记 200 毫秒内的互动。

查看 GPU 活动

在 GPU 部分中查看 GPU 活动。

GPU 部分。

查看光栅活动

在光栅部分查看光栅活动。

“光栅”部分。

分析每秒帧数 (FPS)

开发者工具提供了多种每秒分析帧数的方法：

“Frames”部分

Frames 部分会显示特定帧的确切用时。

将鼠标悬停在帧上可查看提示，其中包含相关详情。

将鼠标悬停在帧上。

此示例会在您将鼠标悬停在帧上时显示提示。

Frames 部分可以显示四种类型的帧：

  1. 空闲帧（白色）。无任何更改。
  2. 框架（绿色）：按预期及时呈现。
  3. 部分呈现的帧（黄色，较宽的虚线模式）。Chrome 已尽最大努力及时至少呈现一些外观更新。例如，如果渲染器进程的主线程（画布动画）的工作延迟，但合成器线程（滚动）及时。
  4. 丢失的帧（红色，且有密集的实线图案）：Chrome 无法在合理的时间内呈现帧。

将鼠标悬停在部分呈现的帧上。

此示例会在您将鼠标悬停在部分呈现的帧上时显示提示。

点击某个框架即可在摘要标签页中查看有关该框架的更多信息。开发者工具用蓝色勾勒出所选帧。

在“摘要”标签页中查看帧。

查看网络请求

展开网络部分，查看记录期间发生的网络请求瀑布流。

在 Network 部分选择的请求，其中“Summary”标签页打开。

请求用颜色标记，如下所示：

  • HTML：蓝色
  • CSS：紫色
  • JS：黄色
  • 图片：绿色

点击某个请求即可在摘要标签页中查看其详情。在前面的示例中，Summary 标签页显示了所选绿色请求的相关信息。

如果请求左上角显示深蓝色方块，则表示该请求具有较高优先级。浅蓝色方块表示优先级较低。在前面的示例中，所选请求的优先级较高，其上方的蓝色请求优先级最高。

Summary 部分包含 Initial Priority 和（最终的）Priority 字段。如果它们的值不同，则表示请求的提取优先级在记录期间发生了变化。如需了解详情，请参阅使用 Fetch Priority API 优化资源加载。

在前面的示例中，对 www.google.com 的请求由左边的一条线表示，中间的条形包含深色部分和浅色部分，而右边是一条线。下一个屏幕截图显示了同一请求的对应表示形式（在 Network 面板的 Timing 标签页中）。下面介绍了这两种表示法之间的对应关系：

  • 左侧行包含 Connection Start 组（含）的所有事件。换句话说，它是 Request Sent 之前的所有内容，不含边界。
  • 长条的浅色部分为 Request Sent 和 Waiting (TTFB)。
  • 条形的深色部分是 Content Download。
  • 右侧的代码行本质上是等待主线程所用的时间。此时间未显示在 Timing 标签页中。

www.google.com 请求的行-栏表示形式。

以下示例展示了 www.google.com 请求的线-栏表示法。

“网络”部分。

此示例显示了 www.google.com 请求的 Timing 标签页表示形式。

查看内存指标

选中 Memory 复选框可查看上次记录的内存指标。

“Memory”复选框。

开发者工具会在 Summary 标签页上方显示新的 Memory 图表。NET 图表下方还有一个称为 HEAP 的新图表。HEAP 图表提供的信息与内存图表中 JS 堆折线相同。

内存指标。

此示例在 Summary 标签页上方显示内存指标。

图表上的彩色线条对应于图表上方彩色的复选框。取消选中复选框可在图表中隐藏该类别。

图表仅显示所选录制内容的区域。在前面的示例中，内存图表仅显示记录开始时的内存用量，最高可达 1,000 毫秒左右。

查看某段录音的时长

在分析“网络”或“主要”等部分时，有时您需要更精确地估算某些事件所花费的时间。按住 Shift 键，点击并按住，然后向左或向右拖动可选择记录的一部分。在您选择的底部，开发者工具会显示该部分所用的时间。

查看某段录音的时长。

在此示例中，所选部分底部的 488.53ms 时间戳表示该部分所用的时间。

查看屏幕截图

如需了解如何启用屏幕截图功能，请参阅在录制时截取屏幕截图。

将鼠标悬停在时间轴概览上，即可查看网页在记录对应的时刻的屏幕截图。时间轴概览部分包含 CPU、FPS 和 NET 图表。

正在查看屏幕截图。

您还可以通过点击 Frames 部分中的帧来查看屏幕截图。开发者工具会在 Summary 标签页中显示屏幕截图的缩小版本。

在“摘要”标签页中查看屏幕截图。

以下示例显示了当您在 Frames 部分中点击 Summary 标签页时 195.5ms 帧的屏幕截图。

点击摘要标签页中的缩略图可放大屏幕截图。

放大“摘要”标签页中的屏幕截图。

该示例显示了您在摘要标签页中点击相关缩略图后的放大屏幕截图。

查看图层信息

要查看有关帧的高级层信息，请执行以下操作：

  1. 启用高级绘制插桩。
  2. 在 Frames 部分中选择一个帧。开发者工具会在 Event Log 标签页旁边的新 Layers 标签页中显示其图层的相关信息。

“图层”选项卡。

将鼠标悬停在图层上，即可在图表中突出显示该图层。

突出显示图层。

以下示例显示，当您将鼠标悬停在图层 #39 上时，该图层会突出显示。

如需移动图表，请执行以下操作：

  • 点击平移模式 平移模式。 可沿 X 轴和 Y 轴移动。
  • 点击旋转模式 旋转模式。 可沿 Z 轴旋转。
  • 点击 Reset Transform 图标 Reset 转换。，将图表重置为原始位置。

了解图层分析的实际应用：

查看绘制性能分析器

如需查看有关绘制事件的高级信息，请执行以下操作：

  1. 启用高级绘制插桩。
  2. 在 Main 轨道中选择一个 Paint 事件。

“Paint Profiler”标签页。

使用“渲染”标签页分析渲染性能

呈现标签页的功能可帮助您直观地了解网页的呈现性能。

打开呈现标签页。

使用 FPS 计量器实时查看每秒帧数

帧渲染统计信息是一个叠加层，显示在视口的右上角。它可在网页运行时提供 FPS 的实时估算值。

请参阅帧渲染统计信息。

使用“Paint Flashing”功能实时查看绘制事件

使用 Paint Flashing 可实时了解网页上所有绘制事件。

请参阅绘制闪烁。

使用“图层边界”查看图层的叠加层

使用图层边框可查看页面顶部的图层边框和图块叠加层。

请参阅图层边框。

实时发现滚动性能问题

使用滚动性能问题找出包含与滚动相关的事件监听器（可能会影响网页性能）的网页元素。开发者工具会以蓝绿色勾勒出可能存在问题的元素。

请参阅滚动性能问题。