性能功能参考

Kayce Basques

Sofia Emelianova

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

如需关于如何分析运行时性能的指导教程，请参阅开始分析运行时性能。 使用 Chrome 开发者工具了解网页性能。

记录性能

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

记录运行时性能

如果您想分析网页运行时的性能，请记录运行时性能， 而不是加载

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

3. 点击 Record 图标 。

   

4. 与网页互动。开发者工具会记录因您的 互动。

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

记录加载性能

如果您希望分析网页加载时的性能，可以记录加载性能， 而不是跑步

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

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

   

DevTools 会自动放大记录发生大部分活动的部分。

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

录制时截取屏幕截图

选中屏幕截图复选框可在录制时截取每一帧的屏幕截图。

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

录制时强制执行垃圾回收

录制网页时，点击 Collect garbage（收集垃圾回收） mop：用于强制执行垃圾回收。

显示录制设置

点击拍摄设置 至 显示更多与开发者工具如何捕获性能记录相关的设置。

停用 JavaScript 示例

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

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

以下屏幕截图显示了停用和启用 JavaScript 示例之间的区别。通过 停用采样功能后，录制的主轨道会短得多，因为它省略了 JavaScript 调用堆栈

此示例展示了已停用 JS 示例的记录。

此示例展示了已启用 JS 示例的记录。

录制时限制网络流量

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

1. 打开 Capture settings 菜单。请参阅显示录制设置。
2. 将网络设置为所选的限制级别。

录制时限制 CPU 占用率

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

1. 打开 Capture settings 菜单。请参阅显示录制设置。
2. 将 CPU 设置为所选的限制级别。

限制与计算机性能有关。例如，2 倍减速选项 这会使 CPU 的运行速度比平时慢 2 倍。开发者工具无法真正模拟 CPU 因为移动设备的架构与 台式机和笔记本电脑。

启用 CSS 选择器统计信息

要在长时间运行的重新计算样式事件期间查看 CSS 规则选择器的统计信息，请执行以下操作：

1. 打开 Capture settings 菜单。请参阅显示录制设置。
2. 选中启用 CSS 选择器统计信息复选框。

如需了解详情，请参阅如何在“重新计算样式”事件期间分析 CSS 选择器性能。

启用高级绘制插桩

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

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

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

模拟硬件并发

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

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

1. 打开 Capture settings 菜单。请参阅显示录制设置。
2. 勾选硬件并发并在输入框中设置核心数。

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

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

保存记录

如需保存录音，请右键点击并选择 Save Profile（保存配置文件）。

加载录音

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

清除上一个录音

录制后，按清除录制内容 从 Performance 面板中清除相应记录。

分析性能记录

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

浏览录制内容

若要仔细检查性能记录，您可以选择记录的一部分，滚动长火焰图，放大和缩小，以及使用面包屑导航在缩放级别之间进行跳转。

选择录音的一部分

在 Performance 面板的操作栏下方以及记录的顶部，您可以看到 Timeline 概览部分包含 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。

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

• 点击 expand_less Previous 或 expand_more Next 按钮。
• 按 Shift + Enter 选择上一个，或按 Enter 选择下一个。

效果面板会针对搜索框中选择的活动显示提示。

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

• 点击 match_case 和 Match case，以使查询区分大小写。
• 点击“正则表达式”regular_expression“正则表达式”即可在查询中使用正则表达式。

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

更改轨道的顺序并将其隐藏

为了整理性能跟踪记录，您可以在轨道配置模式下更改轨道的顺序并隐藏不相关的轨道。

要移动和隐藏轨道，请执行以下操作：

1. 如需进入配置模式，请右键点击轨道名称，然后选择配置轨道。
2. 点击向上或向下箭头 arrow_upward 可将曲目向上或向下移动。点击 visibility_off 将其隐藏。
3. 完成后，点击底部的完成轨道配置，退出配置模式。

观看视频，了解此工作流程的实际应用情况。

Performance 面板为新跟踪记录保存跟踪配置，但在以后的开发者工具会话中不会保存配置。

查看主线程活动

使用 Main 轨道可查看在页面的主线程上发生的活动。

点击某个事件可在摘要标签页中查看关于该事件的更多信息。效果面板会以蓝色显示所选事件的轮廓。

此示例显示了有关摘要标签页中 get 函数调用事件的更多信息。

阅读火焰图

Performance 面板以火焰图表示主线程活动。X 轴表示一段时间内的记录。y 轴表示调用堆栈。上面的事件会导致以下事件。

此示例展示了 Main 轨道中的火焰图。click 事件导致匿名函数调用。进而调用 onEndpointClick_，后者调用 handleClick_，依此类推。

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

较长的任务也会用红色三角形突出显示，超过 50 毫秒的部分用红色阴影表示：

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

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

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

跟踪事件发起者

Main 轨道可以显示将以下发起者及其引发的事件连接的箭头：

• 样式或布局失效 ->重新计算样式或布局
• 请求动画帧 ->动画帧已触发
• 请求空闲回调 ->触发空闲回调
• 安装计时器 ->计时器已触发
• 创建 WebSocket ->Send... 和 Receive WebSocket Handshake 或 Destroy WebSocket

如需查看箭头，请在火焰图中找到发起者或它引发的事件，并将其选中。

选择此选项后，“Summary”（摘要）标签页会显示发起者的发起者链接，以及对于它们所导致的事件的发起者链接。点击这些事件可在相应事件之间切换。

在火焰图中隐藏函数及其子函数

如需整理 Main 线程中的火焰图，您可以隐藏所选函数或其子函数：

1. 在 Main 轨道中，右键点击某个函数，然后选择以下选项之一或按相应的快捷键：

   • 隐藏函数 (H)
   • 隐藏子项 (C)
   • 隐藏重复的子项 (R)
   • 重置子项 (U)
   • 重置跟踪记录 (T)
   • 将脚本添加到忽略列表 (I)

   

   arrow_drop_down 下拉按钮会显示在包含隐藏子级的函数名称旁边。

2. 如需查看隐藏的子级的数量，请将鼠标悬停在 arrow_drop_down 下拉按钮上。

   

3. 如需重置包含隐藏子级或整个火焰图的函数，请选择该函数并按 U，或者右键点击任意函数，然后分别选择 Reset trace。

忽略火焰图中的脚本

要向忽略列表添加脚本，请右键点击图表中的脚本，然后选择向忽略列表添加脚本。

图表会收起被忽略的脚本，将它们标记为在忽略列表中，然后将它们添加到设置中的自定义排除规则中，依次点击设置 >忽略列表。系统会保存已忽略的脚本，直到您将其从跟踪记录或自定义排除规则中移除为止。

在表格中查看活动

记录网页后，您无需仅依赖 Main 轨道来分析活动， 开发者工具还提供三种表格视图，用于分析活动。每种视图都提供了 关于这些活动的观点：

• 如果您想查看造成最多工作的根 activity，请使用调用树 标签页。
• 如要查看直接花费时间最长的活动，请使用 Bottom-Up 标签页。
• 如果您想按记录期间活动发生的顺序查看活动，请使用 事件日志标签页。

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

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

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

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

注意：接下来的三个部分都指的是同一个演示。您可以访问以下网址自行运行演示： 活动标签页演示，并在以下位置查看源代码： GoogleChrome/devtools-samples/perf/activitytabs.html.

根 activity

以下是对 Call Tree 标签页中提到的“根 activity”概念的说明。 Bottom-Up 标签页和事件日志部分。

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

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

如需查看根 activity 的示例，请参阅“调用树”标签页。

“Call Tree”标签页

使用 Call Tree 标签页查看哪些根 activity 导致的工作量最多。

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

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

自用时间表示直接花在该活动上的时间。总时间表示 用户在该活动或其任何子项上所花的时间。

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

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

默认情况下，分组菜单设置为不分组。使用分组菜单可对 查看相应的活动表格

点击显示最耗时的堆栈 在 Activity 表格的右侧显示另一个表格。点击一个活动以填充 最长堆栈表。Heaviest Stack 表格显示所选节点的哪些子级 一个活动的执行时间最长。

“Bottom-Up”标签页

使用自下而上标签页可查看直接占用的汇总时间最多的活动。

Bottom-Up 标签页仅显示所选部分的活动。请参阅 选择录音的一部分，了解如何选择部分。

在该示例的主轨道火焰图中，您可以看到几乎所有 执行对 wait() 的三次调用所用的时间。相应地， Bottom-Up 标签页为 wait。在火焰图中， 对 wait 的调用实际上是数千个 Minor GC 调用。因此，您可以看到 Bottom-Up 标签页中，下一个开销最大的 activity 是 Minor GC。

自用时间列表示所有 其出现次数。

总时间列表示该活动或其任何子活动花费的汇总时间。

“事件日志”标签

使用事件日志标签可按活动期间的发生顺序查看活动 录制。

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

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

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

总时间列表示您直接花在该活动上或任意活动上的时间 子女。

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

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

使用时长菜单可过滤掉不到 1 毫秒或 15 毫秒的所有活动。默认情况下 将时长菜单设为全部，这意味着系统会显示所有活动。

取消选中加载、脚本、呈现或绘制复选框，以过滤出 这些类别的活动

查看显示时间

在计时轨道上，查看重要标记，例如：

• 首次绘制 (FP)
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• DOMContentLoaded 事件 (DCL)
• 加载事件 (L)
• 您的自定义 performance.mark() 调用。下面显示了 813.44 毫秒处有一个带提示的标记，标记为开始运行 JavaScript。
• 您的自定义 performance.measure() 调用。下面显示了一个黄色跨度，标记为互动速度缓慢。

选择一个标记即可在摘要标签页中查看更多详情，包括其时间戳、总时间、自用时间和 detail 对象。

查看互动次数

在互动轨道上查看用户互动情况，追踪潜在的响应问题。

若要查看互动情况，请执行以下操作：

1. 例如，在此演示页面上打开开发者工具。
2. 打开性能面板，然后开始记录。
3. 点击某个元素（咖啡）并停止记录。
4. 在时间轴中找到互动轨道。

在此示例中，Interactions 轨迹显示了 Pointer 互动。互动具有胡须，表示处理时间范围内的输入和呈现延迟。将鼠标悬停在互动上，即可看到包含输入延迟、处理时间和呈现延迟的提示。

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

互动轨道会标记时长超过 200 毫秒的互动，并在右上角显示一个红色三角形。

查看 GPU 活动

在 GPU 部分中查看 GPU 活动。

查看光栅活动

在线程池部分中查看光栅活动。

分析每秒帧数 (FPS)

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

• 使用帧部分查看特定帧所用的时间。
• 您可以使用 FPS 表在页面运行时实时估算 FPS。请参阅每秒浏览帧数 使用 FPS 计量器实时调整数据。

“框架”部分

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

将鼠标悬停在帧上可查看包含相关详细信息的提示。

此示例显示了将鼠标悬停在帧上时显示的提示。

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

1. 空闲帧（白色）。无任何更改。
2. 框架（绿色）。按预期及时呈现。
3. 部分呈现的帧（黄色，具有稀疏宽短划线图案）。Chrome 已尽力及时呈现至少一些视觉更新。例如，如果渲染器进程的主线程工作（画布动画）延迟，但合成器线程（滚动）及时。
4. 丢帧（红色，带有密集实线图案）。Chrome 无法在合理时间内呈现帧。

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

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

查看网络请求

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

在广告网络轨道名称旁边有一个采用不同颜色的请求类型的图例。

阻塞渲染的请求在右上角标有红色三角形。

将鼠标悬停在请求上可查看包含以下信息的提示：

• 请求的网址以及执行请求所需的总时间。
• 优先级或优先级更改，例如 Medium -> High。
• 请求是否为 Render blocking。
• 请求时间的明细，将在后面介绍。

当您点击某个请求时，网络轨道会绘制一个从其发起方指向该请求的箭头。

此外，Performance 面板还会显示 Summary 标签，其中包含有关请求的详细信息，包括但不限于 Initial Priority（初始优先级）和（最终）Priority（优先级）字段。如果它们的值不同，则表示请求的提取优先级在记录期间发生了变化。如需了解详情，请参阅使用 Fetch Priority API 优化资源加载。

摘要标签页还会显示详细的请求时间。

对 www.google.com 的请求由左侧的线条 (|–) 表示，中间的条形包含深色部分和浅色部分，以及右侧的线条 (–|)。

您可以在网络标签页中找到其他时间细分。右键点击广告网络轨道中的相应请求，或在摘要标签页中右键点击该请求，然后点击在“网络”面板中显示。开发者工具会将您转到 Network 面板并选择相应的请求。打开其计时标签页。

这两种细分的对应关系如下：

• 左侧行 (|–) 包含事件组 Connection start（含）之前的所有内容。也就是说，它是 Request Sent 之前的所有内容。
• 该条形的浅色部分为 Request sent 和 Waiting for server response。
• 条形的深色部分为 Content download。
• 右侧代码行 (–|) 是等待主线程所花的时间。网络 >计时标签页未对此进行显示。

查看内存指标

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

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

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

图表上的彩色线条对应于图表上方的彩色复选框。通过停用复选框 在图表中隐藏该类别。

图表仅显示所选记录的区域。在前面的示例中，Memory 图表仅显示开始录制（一直到 1000 毫秒左右）的内存用量。

查看部分录音的时长

在分析“网络”或“主要”等版块时，有时您需要更精确地估算 特定事件所花费的时间按住 Shift 键，点击并按住，然后向左或向右拖动以选择部分 在所选内容的底部，DevTools 会显示该部分所用的时间。

在此示例中，所选部分底部的 488.53ms 时间戳指示时长 该部分所占的比例

查看屏幕截图

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

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

您也可以点击 Frames 部分中的相应帧来查看屏幕截图。开发者工具会显示 摘要标签页中的屏幕截图。

此示例显示了您在帧部分中点击摘要标签页中的 195.5ms 帧的屏幕截图。

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

此示例显示了您在摘要标签中点击缩略图的缩略图被放大的屏幕截图。

查看图层信息

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

1. 启用高级绘制插桩。
2. 在 Frames 部分选择一个帧。开发者工具会在 新的图层标签页（在事件日志标签页旁边）。

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

此示例显示了当您将鼠标悬停在图层 #39 上时，图层处于突出显示状态。

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

• 点击 Pan Mode 图标 可以沿着 X 轴和 Y 轴移动
• 点击旋转模式 即可旋转 沿 Z 轴。
• 点击 Reset Transform 将图表重置到原始位置。

查看图层分析的实际应用：

查看绘制性能分析器

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

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

使用“呈现”标签页分析呈现性能

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

打开渲染标签页。

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

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

请参阅帧渲染统计信息。

使用“涂料闪烁”功能实时查看绘制活动

使用闪烁功能实时查看页面上的所有绘制事件。

请参阅绘制闪烁。

查看带有图层边框的图层叠加层

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

请参阅图层边框。

实时找出滚动性能问题

使用滚动性能问题找出存在与滚动相关的事件监听器（可能会降低网页性能）的网页元素。开发者工具概述了 潜在问题元素（蓝绿色）。

请参阅滚动性能问题。