此页面由 Cloud Translation API 翻译。

性能功能参考

Kayce Basques

Sofia Emelianova

本页面全面介绍了与分析性能相关的 Chrome DevTools 功能。

如需查看有关如何使用 Chrome 开发者工具分析网页性能的引导式教程，请参阅分析运行时性能。

记录性能

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

记录运行时性能

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

前往您要分析的网页。
点击 DevTools 中的性能标签页。
点击录制图标。
与网页互动。开发者工具会记录因您的互动而发生的所有网页活动。
再次点击录制或点击停止以停止录制。

记录加载性能

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

前往您要分析的网页。
打开开发者工具的性能面板。
点击开始分析并重新加载网页 。开发者工具会先转到 about:blank 以清除所有剩余的屏幕截图和轨迹。然后，DevTools 会在网页重新加载期间记录性能指标，并在加载完成几秒钟后自动停止记录。

DevTools 会自动放大录制内容中发生大部分活动的部分。

网页加载记录。

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

在录制时截取屏幕截图

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

“屏幕截图”复选框。

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

在录制期间强制执行垃圾回收

录制网页时，点击收集垃圾图标以强制执行垃圾回收。

回收垃圾。

显示录制设置

点击捕获设置 ，即可显示与 DevTools 捕获性能记录的方式相关的更多设置。

“录制设置”部分。

停用 JavaScript 示例

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

打开拍摄设置 菜单。请参阅显示录制设置。
启用停用 JavaScript 示例复选框。
录制该页面。

以下屏幕截图显示了停用和启用 JavaScript 示例之间的区别。停用抽样后，录制的主轨道会变短很多，因为它会省略所有 JavaScript 调用堆栈。

停用 JS 代码段时的录制内容示例。

此示例显示了已停用 JS 示例的录制内容。

启用 JS 采样后的录制内容示例。

此示例显示了启用了 JS 示例的录制内容。

在录制时节流网络

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

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

在下拉菜单中，效果面板可能还会根据现场数据推荐默认的节流预设或与用户体验大致相符的预设。

在录制时限制 CPU

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

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

节流取决于计算机的性能。例如，减慢 2 倍选项会使 CPU 的运行速度比平时慢 2 倍。由于移动设备的架构与桌面设备和笔记本电脑的架构截然不同，因此开发者工具无法真正模拟移动设备的 CPU。

在下拉菜单中，效果面板可能还会根据现场数据推荐默认的节流预设或与用户体验大致相符的预设。

启用 CSS 选择器统计信息

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

打开拍摄设置 菜单。请参阅显示录制设置。
勾选 Enable CSS selector stats（启用 CSS 选择器统计信息）复选框。

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

启用高级绘制插桩

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

打开拍摄设置 菜单。请参阅显示录制设置。
勾选启用高级绘制插桩复选框。

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

为录音添加注释并分享

记录性能轨迹后，您可以对其进行analyze并添加注解，以分享发现结果。

如需为录音添加注释，请打开效果面板左侧的边栏中的注释标签页。您可以通过以下几种方式添加注释：

为内容添加标签：如需为内容添加标签，请双击相应内容并输入标签。
关联两项内容：如需使用箭头将两项内容关联起来，请双击第一项内容，点击旁边的箭头，然后点击第二项内容。
为时间范围添加标签：如需为任意时间范围添加标签，请按住 Shift 键，从时间范围的开始拖动到结束，然后输入标签。

表演录制内容上的注释。

在此示例中，网络轨道中显示了两个带注释的请求、它们之间的连接，以及一个带注释的时间范围（以粉色突出显示）。注释标签页会在其标签页名称旁边显示注释数量，在此示例中为 4。

如需删除某条注释，请在注释标签页中将鼠标悬停在相应注释上，然后点击旁边的删除按钮。

如需从性能轨迹中隐藏注释，请选中注释标签页底部的 Hide annotations。

保存和分享录音

如需保存录制内容，以便日后与带注释的性能分析结果一起分享，请在性能面板顶部的操作栏中，依次点击下载，然后选择保存轨迹。

保存带注释的轨迹。

或者，选择保存不带注释的轨迹。

加载录音

如需加载录制内容，请点击效果面板顶部的操作栏中的上传。

操作栏中的“加载轨迹”按钮。

如果轨迹中存在注释，性能面板会显示这些注释。

清除之前的录音

录制后，按清除录制内容图标，即可从效果面板中清除相应录制内容。

清除录音。

分析表演录制内容

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

获取富有实用价值的分析洞见

性能面板汇总了 Lighthouse 报告和现已废弃的性能数据分析面板中的性能数据分析。这些数据分析可以提供有关以下性能问题的指导性分析，并建议改进方法，包括但不限于：

按子部分划分的 LCP 和 INP
发现 LCP 请求
导致布局偏移的原因
呈现屏蔽请求
第三方
图片提交
文档请求延迟时间
针对移动设备优化视口
CSS 选择器成本

如需利用数据分析，请执行以下操作：

录制表演。
在效果面板的左侧边栏中，打开数据分析标签页，展开不同的部分，然后将光标悬停在相应项目上并点击。性能面板会突出显示轨迹中的相应事件。

浏览录音

为了帮助您浏览，当您将鼠标悬停在性能轨迹上时，性能面板会执行以下操作：

当您将鼠标悬停在时间轴概览上时，系统会显示一个横向标记，该标记会跨整个性能轨迹显示。
当您将鼠标悬停在主轨道中的项目上时，在时间轴概览中突出显示相应范围。

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

使用键盘快捷键导航

如需使用键盘快捷键快速浏览录音，请先选择首选的键盘导航方式。

在面板的右上角，依次点击 显示快捷方式，然后选择以下任一选项：

传统：使用鼠标滚轮（触控板向上或向下滚动）进行缩放，使用 Shift 键 + 鼠标滚轮进行垂直滚动。
现代：使用鼠标滚轮垂直滚动，使用 Shift 键 + 鼠标滚轮水平滚动，使用 Command/Control 键 + 鼠标滚轮缩放。

快捷方式对话框还会为您提供可用快捷方式的备忘单。

快捷方式对话框，其中包含“效果”面板的导航样式和快捷方式备忘单。

选择录音的一部分

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

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

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

如需使用键盘选择部分内容，请按以下步骤操作：

将焦点放在主轨道或其任何邻近轨道上。
使用 W、A、S、D 键分别执行放大、向左移动、缩小和向右移动操作。

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

将光标悬停在时间轴概览部分或任何轨道（主轨道及其相邻轨道）上。
使用两根手指，向上滑动可缩小，向左滑动可向左移动，向下滑动可放大，向右滑动可向右移动。

创建面包屑导航并在缩放级别之间跳转

借助时间轴概览，您可以依次创建多个嵌套面包屑导航，逐渐放大缩放级别，然后在缩放级别之间自由跳转。

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

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

如需移除面包屑导航的子级，请右键点击父级面包屑导航，然后选择移除子级面包屑导航。

滚动长火焰图

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

忽略火焰图中不相关的脚本

为了更好地专注于代码，您可以将不相关的脚本添加到忽略列表。

如需忽略脚本，请执行以下操作之一：

点击顶部操作栏中的 显示忽略列表设置对话框，然后在输入字段中输入正则表达式。火焰图表会在您输入内容时应用新规则。
右键点击相应脚本，然后选择将脚本添加到忽略列表。效果面板会将此脚本添加到 “显示忽略列表设置”对话框中的列表中。

该面板会自动收起此类脚本的过度嵌套，并将其标记为 On ignore list (REGULAR_EXPRESSION)。

在 “显示忽略列表设置”对话框中，您可以开启和关闭忽略列表规则。

如需从忽略列表中移除脚本，请在火焰图中右键点击该脚本，然后选择从忽略列表中移除脚本；或者在 显示忽略列表设置对话框中将光标悬停在该脚本上，然后点击移除。

您在设置 > 忽略列表中添加的忽略列表规则会保存在 DevTools 中。

此外，如需仅关注第一方脚本，请选中 Dim 3rd parties。效果面板会将第三方脚本灰显。

搜索活动记录

您可以在主要轨道中的活动和网络轨道中的请求中进行搜索。

如需打开效果面板底部的搜索框，请按以下键：

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

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

如需轮流查看与您的查询匹配的活动，请执行以下操作：

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

效果面板会在搜索框中选择的活动上方显示提示。

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

点击 区分大小写，使查询区分大小写。
点击 正则表达式，以便在查询中使用正则表达式。

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

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

如需简化性能轨迹，您可以在轨迹配置模式下更改轨迹的顺序并隐藏不相关的轨迹。

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

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

观看视频，了解此工作流的运作方式。

性能面板会为新轨迹保存轨道配置，但不会在下一次开发者工具会话中保存。

查看主线程活动

使用主轨道可查看在网页的主线程中发生的活动。

主轨道。

点击某个事件可在摘要标签页中查看与其相关的更多信息，包括但不限于：时间、堆栈轨迹、指向相应脚本的链接，以及第三方名称（如果有）。效果面板会以蓝色勾勒出所选事件。

如需详细了解主线程事件，请参阅“摘要”标签页。

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

阅读火焰图

性能面板会以火焰图的形式显示主线程活动。x 轴表示一段时间内的录制内容。y 轴表示调用堆栈。顶部的事件会导致下面的事件。

火焰图。

此示例显示了主要轨道中的火焰图。click 事件导致了匿名函数调用。该函数又调用了 onEndpointClick_，后者又调用了 handleClick_，依此类推。

性能面板会为脚本分配随机颜色，以打破火焰图的连续性，使其更易于阅读。在前面的示例中，一个脚本中的函数调用显示为浅蓝色。来自其他脚本的调用会显示为浅粉色。深黄色表示脚本活动，紫色事件表示渲染活动。这些较深的黄色和紫色事件在所有录制内容中都是一致的。

系统还会突出显示长任务，并用红色三角形标记，超过 50 毫秒的部分会以红色填充：

长任务。

在此示例中，任务耗时超过 400 毫秒，因此代表最后 350 毫秒的部分用红色填充，而前 50 毫秒则未填充。

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

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

跟踪事件发起者

主要轨道可以显示箭头，用于连接以下发起者及其所触发的事件：

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

如需查看箭头，请在火焰图中找到发起者或其导致的事件，然后选择相应项。

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

选择相应维度后，“摘要”标签页会显示发起者的“发起者”链接，以及由发起者触发的事件的“由谁发起”链接。点击这些标签可在相应事件之间跳转。

“摘要”标签页中的“发起者”链接。

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

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

在主轨道中，右键点击某个函数，然后选择以下选项之一或按相应的快捷键：
- 隐藏函数 (H)
- 隐藏子项 (C)
- 隐藏重复的子项 (R)
- 重置子项 (U)
- 重置轨迹 (T)
- 向忽略列表添加脚本 (I)
具有隐藏子级的函数名称旁边会显示下拉按钮。
如需查看隐藏子项的数量，请将鼠标悬停在下拉按钮上。
如需重置包含隐藏子级的函数或整个火焰图，请分别选择相应函数并按 U 或右键点击任意函数并选择重置轨迹。

忽略火焰图中的脚本

如需将脚本添加到忽略列表，请右键点击图表中的脚本，然后选择将脚本添加到忽略列表。

焦点位于“忽略脚本”选项的上下文菜单。

该图表会收起已忽略的脚本，将其标记为已列入忽略列表，并将其添加到 设置 > 忽略列表中的自定义排除规则中。被忽略的脚本会一直保存，直到您从轨迹或自定义排除规则中将其移除。

“设置”中的“忽略脚本列表”标签页。

在表格中查看活动

记录页面后，您无需仅依靠主要轨道来分析活动。开发者工具还提供了三个表格视图来分析 activity。每个视图都会从不同的角度展示活动：

如需查看导致工作量最多的根 activity，请使用调用树标签页。
如需查看直接花费时间最多的活动，请使用自下而上标签页。
如果您想按记录期间活动发生的顺序查看活动，请使用事件日志标签页。

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

匹配大小写。
正则表达式。
全字匹配。

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

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

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

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

根 activity

下面介绍了调用树标签页、自底向上标签页和事件日志部分中提及的根 activity 概念。

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

在主要轨道的火焰图中，根 activity 位于图表顶部。在调用树和事件日志标签页中，根 activity 是顶级项。

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

“调用树”标签页

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

通话树标签页仅显示录音的所选部分中的活动。如需了解如何选择片段，请参阅选择录音的部分内容。

“调用树”标签页。

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

自用时间表示直接在该 activity 中花费的时间。总时间表示在该 activity 或其任何子项中所花的时间。

点击自学时间、总学习时间或活动，以按相应列对表格进行排序。

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

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

点击显示占用内存最多的堆栈图标，在活动表格右侧显示另一个表格。点击某个活动以填充占用内存最多的堆栈表格。执行用时最长的堆栈表格会显示所选 activity 的哪些子项的执行时间最长。

“自下而上”标签页

使用自下而上标签页查看哪些活动在总体上直接占用了最多的时间。

自下而上标签页仅显示录制内容的所选部分中的活动。如需了解如何选择片段，请参阅选择录音的部分内容。

“自下而上”标签页。

在此示例的主轨迹火焰图中，您可以看到，几乎所有时间都花在了执行对 wait() 的三次调用上。因此，自下而上标签页中的顶部活动是 wait。在火焰图中，wait 调用下方的黄色部分实际上是数千次 Minor GC 调用。因此，您可以看到，在 Bottom-Up 标签页中，下一个开销最高的 activity 是 Minor GC。

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

总时间列表示在该 activity 或其任何子项中所花费的总时间。

“事件日志”标签页

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

事件日志标签页仅显示录制的选定部分中的活动。如需了解如何选择片段，请参阅选择录音的部分内容。

“事件日志”标签页。

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

“自用时间”列表示直接在相应活动中所花的时间。

总时长列表示直接在相应 activity 或其任何子 activity 中所花的时间。

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

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

使用时长菜单可滤除时长小于 1 毫秒或 15 毫秒的所有活动。默认情况下，时长菜单设置为全部，即显示所有活动。

停用加载、脚本、渲染或绘制复选框，即可滤除这些类别中的所有活动。

查看效果标记

在横跨性能轨迹的垂直线条叠加层中，您可以看到重要的性能标记，例如：

叠加层中的效果标记。

将鼠标悬停在轨迹底部的标记名称上，即可查看其时间戳。

查看自定义时间安排

在时间轨道上，查看自定义效果标记，例如：

performance.mark() 调用。下面显示了 813.44 毫秒处带有提示的单个标记，标签为“开始运行 JavaScript”。
performance.measure() 调用。下方显示了一个标记为互动缓慢的黄色 span。

时间轨道中的标记。

选择一个标记，即可在摘要标签页中查看更多详细信息，包括其时间戳、总时间、自定义时间和 detail 对象。对于 performance.mark() 和 performance.measure() 调用，该标签页还会显示堆栈轨迹。

查看互动

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

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

例如，在此演示页面上打开开发者工具。
打开效果面板，然后开始录制。
点击某个元素（咖啡），然后停止录制。
在时间轴中找到互动轨道。

“互动”轨道。

在此示例中，互动轨道显示了指针互动。互动会显示 Whisker，用于指示处理时间边界处的输入和呈现延迟。将鼠标悬停在相应互动上，即可看到包含输入延迟时间、处理时间和呈现延迟时间的工具提示。

互动轨迹还会在摘要标签页中以及悬停时显示的提示中，针对互动时间超过 200 毫秒的互动显示 Interaction to Next Paint (INP) 警告：

INP 警告。

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

视图布局偏移

在布局偏移轨道上查看布局偏移。班次显示为紫色菱形，并会根据其在时间轴上的接近程度分组为集群（紫色线条）。

“布局偏移”轨道。

如需突出显示导致视口中布局偏移的元素，请将鼠标悬停在相应的菱形上。

如需在摘要标签页中详细了解布局偏移或偏移情况（包括时间、得分、元素和可能的罪魁祸首），请点击相应的菱形或集群。

如需了解详情，请参阅累积布局偏移 (CLS)。

查看动画

在动画轨道上查看动画。动画的命名方式与相应的 CSS 属性或元素（如果有）相同，例如 transform 或 my-element。非合成动画会在右上角标记为红色三角形。

选择了未合成的动画的“动画”轨道。

选择一个动画，在摘要标签页中查看更多详细信息，包括合成失败的原因。

查看 GPU 活动

在 GPU 部分查看 GPU 活动。

GPU 部分。

查看光栅活动

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

“线程池”部分中的光栅活动。

分析每秒帧数 (FPS)

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

您可以使用帧部分查看特定帧的用时。
使用 FPS 计量器实时估算页面运行时的 FPS。请参阅使用 FPS 计量器实时查看每秒帧数。

“Frames”部分

Frames 部分会准确告知您特定帧的耗时。

将鼠标悬停在某个帧上，即可查看包含该帧的更多信息的提示。

将鼠标悬停在某个帧上。

此示例显示了当您将鼠标悬停在某个帧上时显示的工具提示。

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

空闲帧（白色）。无任何更改。
帧（绿色）。按预期和按时呈现。
部分呈现的帧（黄色，带有稀疏的宽虚线图案）。Chrome 会尽力及时呈现至少部分视觉更新。例如，如果渲染程序主线程的工作（画布动画）延迟，但 compositor 线程（滚动）工作及时。
丢帧（红色，带有密集的实线图案）。Chrome 无法在合理的时间内呈现帧。

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