本页面全面介绍了与分析性能相关的 Chrome DevTools 功能。
如需查看有关如何使用 Chrome 开发者工具分析网页性能的引导式教程，请参阅分析运行时性能。
记录性能
您可以记录运行时或加载性能。
记录运行时性能
如果您想分析网页在运行（而非加载）时的性能，请记录运行时性能。
- 前往您要分析的网页。
- 点击 DevTools 中的性能标签页。
点击录制图标
。
与网页互动。开发者工具会记录因您的互动而发生的所有网页活动。
再次点击录制或点击停止即可停止录制。
记录加载性能
如果您想分析网页在加载（而非运行）时的性能，请记录加载性能。
- 前往您要分析的网页。
- 打开开发者工具的性能面板。
点击开始分析并重新加载网页
。开发者工具会先转到 about:blank以清除所有剩余的屏幕截图和轨迹。然后，DevTools 会在网页重新加载期间记录性能指标，并在加载完成几秒钟后自动停止记录。
DevTools 会自动放大录制内容中发生大部分活动的部分。
在此示例中，性能面板会显示网页加载期间的活动。
在录制时截取屏幕截图
启用屏幕截图复选框，即可在录制时截取每帧的屏幕截图。
如需了解如何与屏幕截图互动，请参阅查看屏幕截图。
在录制期间强制执行垃圾回收
录制网页时，点击收集垃圾图标 以强制执行垃圾回收。
显示录制设置
点击捕获设置
，即可显示与 DevTools 捕获性能记录的方式相关的更多设置。
停用 JavaScript 示例
默认情况下，录音的主轨道会显示录制期间调用的 JavaScript 函数的详细调用堆栈。如需停用这些调用堆栈，请执行以下操作：
- 打开拍摄设置
菜单。请参阅显示录制设置。 - 启用停用 JavaScript 示例复选框。
- 录制该页面。
以下屏幕截图显示了停用和启用 JavaScript 示例之间的区别。停用抽样后，录制的主轨道会变短很多，因为它会省略所有 JavaScript 调用堆栈。
此示例显示了已停用 JS 示例的录制内容。
此示例显示了启用了 JS 示例的录制内容。
在录制时节流网络
如需在录制时节流网络，请执行以下操作：
- 打开拍摄设置
菜单。请参阅显示录制设置。 - 将网络设置为所选的节流级别。
在录制时限制 CPU
如需在录制时限制 CPU，请执行以下操作：
- 打开拍摄设置
菜单。请参阅显示录制设置。 - 将 CPU 设置为所选的节流级别。
节流取决于计算机的性能。例如，减慢 2 倍选项会使 CPU 的运行速度比平时慢 2 倍。由于移动设备的架构与桌面设备和笔记本电脑的架构截然不同，因此开发者工具无法真正模拟移动设备的 CPU。
启用 CSS 选择器统计信息
如需在长时间运行的重新计算样式事件期间查看 CSS 规则选择器的统计信息，请执行以下操作：
- 打开拍摄设置
菜单。请参阅显示录制设置。 - 勾选 Enable CSS selector stats（启用 CSS 选择器统计信息）复选框。
如需了解详情，请参阅如何分析“重新计算样式”事件期间的 CSS 选择器性能。
启用高级绘制插桩
如需查看详细的绘制插桩，请执行以下操作：
- 打开拍摄设置 菜单。请参阅显示录制设置。
- 勾选启用高级绘制插桩复选框。
如需了解如何与绘制信息互动，请参阅查看图层和查看绘制性能分析器。
为录音添加注释并分享
记录性能轨迹后，您可以对其进行分析并添加注解，以分享发现结果。
如需为录音添加注释，请打开效果面板左侧的 边栏中的注释标签页。您可以通过以下几种方式添加注释：
- 为内容添加标签：如需为内容添加标签，请双击相应内容并输入标签。
- 关联两项内容：如需使用箭头将两项内容关联起来，请双击第一项内容，点击旁边的箭头，然后点击第二项内容。
- 为时间范围添加标签：如需为任意时间范围添加标签，请按住 Shift 键，从时间范围的开始拖动到结束，然后输入标签。
在此示例中，网络轨道中显示了两个带注释的请求、它们之间的连接，以及一个带注释的时间范围（以粉色突出显示）。注释标签页会在其标签页名称旁边显示注释数量，在此示例中为 4。
如需删除某条注释，请在注释标签页中将鼠标悬停在相应注释上，然后点击旁边的 删除按钮。
如需从性能轨迹中隐藏注释，请选中注释标签页底部的 Hide annotations。
保存和分享录音
如需保存录制内容，以便日后与带注释的性能分析结果一起分享，请在性能面板顶部的操作栏中，依次点击 下载，然后选择保存轨迹。
或者，选择保存不带注释的轨迹。
加载录音
如需加载录制内容，请点击效果面板顶部的操作栏中的 上传。
如果轨迹中存在注释，性能面板会显示这些注释。
清除之前的录音
录制后，按清除录制内容图标 
，即可从效果面板中清除相应录制内容。
分析表演录制内容
记录运行时性能或记录加载性能后，性能面板会提供大量数据，以便分析刚刚发生的性能情况。
获取富有实用价值的分析洞见
性能面板汇总了 Lighthouse 报告和现已废弃的性能数据分析面板中的性能数据分析。这些数据分析可以提供有关以下性能问题的指导性分析，并建议改进方法，包括但不限于：
- 按阶段划分的 LCP 和 INP
- 发现 LCP 请求
- 导致布局偏移的原因
- 呈现屏蔽请求
- 第三方
- 图片提交
- 文档请求延迟时间
- 针对移动设备优化视口
- CSS 选择器成本
如需利用数据分析，请执行以下操作：
- 录制表演。
- 在效果面板的左侧边栏中，打开数据分析标签页，展开不同的部分，然后将光标悬停在相应项目上并点击。性能面板会突出显示轨迹中的相应事件。
浏览录音
如需仔细检查性能录制内容，您可以选择录制内容的一部分、滚动长长的火焰图、放大和缩小，还可以使用面包屑导航在不同缩放级别之间跳转。
选择录音的一部分
在性能面板的操作栏下方和录制的顶部，您可以看到包含 CPU 和 NET 图表的时间轴概览部分。
如需选择录音的某个部分，请点击并按住，然后在时间轴概览中向左或向右拖动。
如需使用键盘选择部分内容，请按以下步骤操作：
- 将焦点放在主轨道或其任何邻近轨道上。
- 使用 W、A、S、D 键分别可放大、向左移动、缩小和向右移动。
如需使用触控板选择部分内容，请执行以下操作：
- 将光标悬停在时间轴概览部分或任何轨道（主轨道及其相邻轨道）上。
- 使用两根手指，向上滑动可缩小，向左滑动可向左移动，向下滑动可放大，向右滑动可向右移动。
创建面包屑导航并在缩放级别之间跳转
借助时间轴概览，您可以依次创建多个嵌套面包屑导航，逐渐放大缩放级别，然后在缩放级别之间自由跳转。
如需创建和使用面包屑导航，请执行以下操作：
- 在时间轴概览中，选择录制的某个部分。
- 将鼠标悬停在所选内容上，然后点击 N ms 按钮。所选内容会展开，填满时间轴概览。时间轴概览顶部会开始构建一条面包屑链。
- 重复前两个步骤，再创建一个嵌套面包屑导航。只要选择范围大于 5 毫秒，您就可以继续嵌套面包屑导航。
- 如需跳转到所选的缩放级别，请点击时间轴概览顶部链条中的相应面包屑导航。
如需移除面包屑导航的子级，请右键点击父级面包屑导航，然后选择移除子级面包屑导航。
滚动长火焰图
如需滚动主轨道或其任何邻近轨道中的长火焰图表，请点击并按住，然后向任意方向拖动，直到您要查找的内容显示在视野中。
搜索活动记录
您可以在主要轨道中的活动和网络轨道中的请求中进行搜索。
如需打开效果面板底部的搜索框，请按以下键：
- macOS：Command+F
- Windows、Linux：Ctrl+F
此示例在底部的搜索框中显示了一个正则表达式，用于查找以 E 开头的任何 activity。
如需轮流查看与您的查询匹配的活动，请执行以下操作：
- 点击 Previous 或 Next 按钮。
- 按 Shift+Enter 可选择上一个，按 Enter 可选择下一个。
效果面板会在搜索框中选择的活动上方显示提示。
如需修改查询设置，请执行以下操作：
- 点击 区分大小写，使查询区分大小写。
- 点击 正则表达式，以便在查询中使用正则表达式。
如要隐藏搜索框，请点击取消。
更改轨道的顺序并将其隐藏
如需简化性能轨迹，您可以在轨迹配置模式下更改轨迹的顺序并隐藏不相关的轨迹。
如需移动和隐藏轨道，请执行以下操作：
- 如需进入配置模式，请右键点击轨道名称，然后选择配置轨道。
- 点击向上箭头 或向下箭头 可向上或向下移动轨道。点击 即可将其隐藏。
- 完成后，点击底部的完成轨道配置以退出配置模式。
观看视频，了解此工作流的运作方式。
性能面板会为新轨迹保存轨道配置，但不会在下一次开发者工具会话中保存。
查看主线程活动
使用主轨道可查看在网页的主线程中发生的活动。
点击某个事件可在摘要标签页中查看与其相关的更多信息。效果面板会以蓝色勾勒出所选事件。
此示例在摘要标签页中显示了有关 get 函数调用事件的更多信息。
阅读火焰图
性能面板会以火焰图的形式显示主线程活动。x 轴表示一段时间内的录制内容。y 轴表示调用堆栈。顶部的事件会导致下面的事件。
此示例显示了 Main 轨道中的火焰图。click 事件导致了匿名函数调用。该函数又调用了 onEndpointClick_，后者又调用了 handleClick_，依此类推。
性能面板会为脚本分配随机颜色，以打破火焰图的连续性，使其更易于阅读。在前面的示例中，一个脚本中的函数调用显示为浅蓝色。来自其他脚本的调用会显示为浅粉色。较深的黄色表示脚本活动，紫色事件表示渲染活动。这些较深的黄色和紫色事件在所有录制内容中都是一致的。
系统还会以红色三角形突出显示长任务，并将超过 50 毫秒的部分着色为红色：
在此示例中，任务耗时超过 400 毫秒，因此代表最后 350 毫秒的部分用红色填充，而前 50 毫秒则未填充。
此外，Main 轨道会显示使用 profile() 和 profileEnd() 控制台函数启动和停止的 CPU 配置文件的相关信息。
如需隐藏 JavaScript 调用的详细火焰图，请参阅停用 JavaScript 示例。停用 JS 样本后，您将只看到 Event (click) 和 Function Call 等高级事件。
跟踪事件发起者
主要轨道可以显示箭头，用于连接以下发起者及其所触发的事件：
- 样式或布局失效 -> 重新计算样式或布局
- 请求动画帧 -> 已触发动画帧
- 请求空闲回调 -> 触发空闲回调
- 安装计时器 -> 计时器已触发
- 创建 WebSocket -> 发送...和接收 WebSocket 握手或销毁 WebSocket
如需查看箭头，请在火焰图中找到发起者或其导致的事件，然后选择相应项。
选择相应维度后，“摘要”标签页会显示发起者的发起者链接，以及它们所触发事件的由谁发起链接。点击这些标签可在相应事件之间跳转。
在火焰图中隐藏函数及其子项
如需简化 Main 线程中的火焰图，您可以隐藏所选函数或其子项：
在主轨道中，右键点击某个函数，然后选择以下选项之一或按相应的快捷键：
- 隐藏函数 (
H) - 隐藏子项 (
C) - 隐藏重复的子项 (
R) - 重置子项 (
U) - 重置轨迹 (
T) - 向忽略列表添加脚本 (
I)
具有隐藏子级的函数名称旁边会显示 下拉按钮。
- 隐藏函数 (
如需查看隐藏子项的数量，请将鼠标悬停在 下拉按钮上。
如需重置包含隐藏子级的函数或整个火焰图，请分别选择相应函数并按
U或右键点击任意函数并选择重置轨迹。
忽略火焰图中的脚本
如需将脚本添加到忽略列表，请右键点击图表中的脚本，然后选择将脚本添加到忽略列表。
该图表会收起已忽略的脚本，将其标记为已列入忽略列表，并将其添加到 设置 > 忽略列表中的自定义排除规则中。被忽略的脚本会一直保存，直到您从轨迹或自定义排除规则中将其移除。
在表格中查看活动
记录页面后，您无需仅依靠主要轨道来分析活动。开发者工具还提供了三个表格视图来分析 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 毫秒的所有活动。默认情况下，时长菜单设置为全部，即显示所有活动。
停用加载、脚本、渲染或绘制复选框，即可滤除这些类别中的所有活动。
查看时间
在时间轨道上，查看重要标记，例如：
- 首次绘制 (FP)
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- DOMContentLoaded 事件 (DCL)
- Onload 事件 (L)
- 您的自定义
performance.mark()调用。下面显示了 813.44 毫秒处带有提示的单个标记，标签为“开始运行 JavaScript”。 - 您的自定义
performance.measure()调用。下方显示了一个标记为互动缓慢的黄色 span。
选择一个标记，即可在摘要标签页中查看更多详细信息，包括其时间戳、总时间、自定义时间和 detail 对象。对于 performance.mark() 和 performance.measure() 调用，该标签页还会显示堆栈轨迹。
查看互动
在互动轨道上查看用户互动，以跟踪潜在的响应速度问题。
如需查看互动情况，请执行以下操作：
在此示例中，互动轨道显示了指针互动。互动会显示 Whisker，用于指示处理时间边界处的输入和呈现延迟。将鼠标悬停在相应互动上，即可看到包含输入延迟时间、处理时间和呈现延迟时间的工具提示。
互动轨迹还会在摘要标签页中以及悬停时显示的提示中，针对超过 200 毫秒的互动显示 Interaction to Next Paint (INP) 警告：
互动轨道会在右上角显示红色三角形，以标记超过 200 毫秒的互动。
视图布局偏移
在布局偏移轨迹上查看布局偏移。班次显示为紫色菱形，并会根据其在时间轴上的接近程度分组为clusters（紫色线条）。
如需突出显示导致视口中布局偏移的元素，请将鼠标悬停在相应的菱形上。
如需在摘要标签页中详细了解布局偏移或偏移情况（包括时间、得分、元素和可能的罪魁祸首），请点击相应的菱形或集群。
如需了解详情，请参阅累积布局偏移 (CLS)。
查看动画
在动画轨道上查看动画。动画的命名方式与相应的 CSS 属性或元素（如果有）相同，例如 transform 或 my-element。非合成动画会在右上角标记为红色三角形。
选择一个动画，在摘要标签页中查看更多详细信息，包括合成失败的原因。
查看 GPU 活动
在 GPU 部分中查看 GPU 活动。
查看光栅活动
在线程池部分查看光栅活动。
分析每秒帧数 (FPS)
开发者工具提供了多种方法来分析每秒帧数：
- 您可以使用帧部分查看特定帧的用时。
- 使用 FPS 计量器实时估算页面运行时的 FPS。请参阅使用 FPS 计量器实时查看每秒帧数。
“Frames”部分
Frames 部分会准确告知您特定帧的耗时。
将鼠标悬停在某个帧上，即可查看包含该帧的更多信息的提示。
此示例显示了当您将鼠标悬停在某个帧上时显示的工具提示。
Frames 部分可以显示四种类型的帧：
- 空闲帧（白色）。无任何更改。
- 帧（绿色）。按预期和按时呈现。
- 部分呈现的帧（黄色，带有稀疏的宽虚线图案）。Chrome 会尽力及时呈现至少部分视觉更新。例如，如果渲染程序主线程的工作（画布动画）延迟，但 compositor 线程（滚动）工作及时。
- 丢帧（红色，带有密集的实线模式）。Chrome 无法在合理的时间内呈现帧。
此示例展示了当您将鼠标悬停在部分呈现的帧上时，系统会显示一个工具提示。
点击某个画面即可在摘要标签页中查看与该画面相关的更多信息。开发者工具会以蓝色勾勒出所选帧。
查看网络请求
展开网络部分，查看性能记录期间发生的网络请求的广告瀑布流。
网络轨道名称旁边有一个图例，其中显示了按颜色编码的请求类型。
右上角会用红色三角形标记渲染阻塞请求。
将鼠标指针悬停在某个请求上，即可看到包含以下内容的提示：
- 请求的网址和执行该请求所花费的总时间。
- 优先级或优先级更改，例如
Medium -> High。 - 请求是否为
Render blocking。 - 请求时间细分（稍后会介绍）。
当您点击某个请求时，网络轨迹会从发起者到请求绘制一条箭头。
此外，效果面板会显示摘要标签页，其中包含有关请求的更多信息，包括但不限于初始优先级和（最终）优先级字段。如果这两个值不同，则表示请求的提取优先级在记录期间发生了变化。如需了解详情，请参阅使用 Fetch Priority API 优化资源加载。
摘要标签页还会显示请求时间的细分信息。
对 www.google.com 的请求由左侧的线条 (|–)、中间的条状标签（包含一个深色部分和一个浅色部分）以及右侧的线条 (–|) 表示。
您可以在网络标签页中找到其他时间细分。在网络轨道中右键点击相应请求，或在摘要标签页中右键点击相应请求的网址，然后点击在“网络”面板中显示。开发者工具会将您转到 Network 面板，并选择相应请求。打开时间标签页。
这两种细分之间的对应关系如下：
- 左侧线条 (
|–) 是指包括Connection start组事件在内的所有内容。换句话说，就是Request Sent之前的所有内容。 - 条状标签的亮色部分为
Request sent和Waiting for server response。 - 栏的深色部分为
Content download。 - 右侧线条 (
–|) 是等待主线程所花的时间。广告网络 > 时间标签页不会显示该维度。
查看内存指标
选中内存复选框，即可查看上次记录的内存指标。
开发者工具会在摘要标签页上方显示新的内存图表。NET 图表下方还有一个名为 HEAP 的新图表。HEAP 图表提供的信息与内存图表中的 JS 堆行相同。
此示例显示了摘要标签页上方的内存指标。
图表上的彩色线条对应于图表上方的彩色复选框。停用相应复选框，即可从图表中隐藏该类别。
该图表仅显示所选录音的区域。在前面的示例中，内存图表仅显示了记录开始时（最多 1000 毫秒左右）的内存用量。
查看录音的某个部分的时长
在分析网络或主屏幕等部分时，有时您需要更精确地估算某些事件所花费的时间。按住 Shift 键，点击并按住，然后向左或向右拖动以选择录制的部分内容。在所选内容的底部，DevTools 会显示该部分所用的时间。
在此示例中，所选部分底部的 488.53ms 时间戳表示该部分所用时间。
查看屏幕截图
如需了解如何启用屏幕截图功能，请参阅在录制时截取屏幕截图。
将鼠标悬停在时间轴概览上，即可查看录制过程中相应时间点的网页屏幕截图。时间轴概览部分包含 CPU、FPS 和 NET 图表。
您还可以点击画面部分中的某个画面来查看屏幕截图。开发者工具会在摘要标签页中显示屏幕截图的小版本。
此示例显示了在帧部分中点击 195.5ms 帧后，摘要标签页中 195.5ms 帧的屏幕截图。
点击摘要标签页中的缩略图可放大屏幕截图。
以下示例显示了您在摘要标签页中点击相应缩略图后，该报告的放大屏幕截图。
查看图层信息
如需查看某个帧的高级图层信息，请执行以下操作：
- 启用高级绘制插桩。
- 在帧部分中选择一个帧。开发者工具会在事件日志标签页旁边的新图层标签页中显示图层的相关信息。
将鼠标悬停在某个图层上，即可在图表中将其突出显示。
此示例显示了当您将鼠标悬停在图层 #39 上时，该图层会突出显示。
如需移动图表，请执行以下操作：
- 点击平移模式
即可沿 X 轴和 Y 轴移动。 - 点击旋转模式
以沿 Z 轴旋转。 - 点击重置转换
可将图表重置为原始位置。
查看层分析的实际运作方式：
查看绘制性能分析器
如需查看绘制事件的详细信息，请执行以下操作：
- 启用高级绘制插桩。
- 在主轨道中选择一个 Paint 事件。
使用“渲染”标签页分析渲染性能
使用渲染标签页中的功能可直观了解网页的渲染性能。
使用 FPS 计量器实时查看每秒帧数
帧渲染统计信息是显示在视口右上角的叠加层。它会在页面运行时实时估算 FPS。
请参阅帧渲染统计信息。
使用“绘制闪烁”功能实时查看绘制事件
使用绘制闪烁可实时查看网页上的所有绘制事件。
请参阅绘制闪烁。
使用图层边框查看图层叠加层
使用图层边框可在页面顶部查看图层边框和图块叠加层。
请参阅图层边框。
实时查找滚动性能问题
使用滚动性能问题可确定网页中是否存在与滚动相关的事件监听器，这些监听器可能会影响网页的性能。开发者工具会用蓝绿色突出显示可能存在问题的元素。
请参阅滚动性能问题。