本页是与分析性能相关的 DevTools 功能的综合参考。
有关如何使用 性能 工具分析页面性能的分步教程，请参阅分析 运行时性能 (教程) 。
此页中的图像显示已取消停靠到其自己的专用窗口中的 DevTools。 若要了解有关取消停靠 DevTools 的详细信息，请参阅将 DevTools 放置更改为“取消停靠”、“停靠到底部”、“停靠到左侧 () ”中的“将 DevTools 取消停靠到单独窗口中。
详细内容：
- 打开性能工具
- 记录性能
- 为录制内容添加批注并共享
- 清除上一记录
- 分析性能录制
- 使用 “渲染” 工具分析渲染性能
- 可视化内存泄漏 (性能工具：“内存复选框”)
打开性能工具
若要在 DevTools 中打开 性能 工具，请执行以下操作：
右键单击某个网页，然后选择 “检查”。
或者，按 Ctrl+Shift+I（Windows、Linux）或 Command+Option+I (macOS)。
DevTools 随即打开。
在 DevTools 的 “活动栏”上，选择“ 性能 ”
) 选项卡。如果该选项卡不可见，请单击 “更多工具 ” (“
“按钮。
记录性能
以下部分介绍如何在 DevTools 中记录网页的性能。
记录运行时性能
分析网页在运行时 (而不是加载时的性能) ：
转到要分析的网页，如 照片库演示。
右键单击该网页，然后选择 “检查”。
DevTools 随即打开。
在 “活动栏”上，选择“ 性能 (
) 工具。单击 记录 (
) 按钮。
与页面交互一段时间。 DevTools 将记录由于交互而发生的所有页面活动。
再次单击 “录制 ”。 或者，单击“ 停止” 停止录制。
性能工具显示录制内容。
记录加载性能
要分析网页在加载 (而不是运行时) 运行时的性能：
转到要分析的网页，如 照片库演示。
右键单击该网页，然后选择 “检查”。
DevTools 随即打开。
在 “活动栏”上，选择“ 性能 (
) 工具。单击“ 刷新页面 ” (“
) ”按钮：
DevTools 在页面刷新时记录性能指标，然后在加载完成后几秒钟自动停止记录。 然后，DevTools 将显示记录，并自动放大大部分活动发生的记录部分：
录制时记录屏幕截图
若要在录制时捕获每个帧的屏幕截图，请选中“ 屏幕截图” 复选框：
若要了解如何与屏幕截图交互，请参阅下面的 “查看屏幕截图”。
录制时强制收集垃圾
若要在录制页面时强制收集垃圾，请单击“ 收集垃圾 ” (“收集 
) 按钮：
显示录制设置
若要公开与 DevTools 如何捕获性能记录相关的更多设置，请执行以下操作：
在“性能”工具中，单击“记录设置” (“
) ”按钮。复选框和下拉列表显示在 性能 工具的顶部：
禁用 JavaScript 示例
默认情况下，录制 的主要部分会 显示录制期间调用的 JavaScript 函数的详细调用栈。 若要禁用 JavaScript 调用堆栈，请执行以下操作：
在“性能”工具中，单击“记录设置” (“
) ”按钮。选中“ 禁用 JavaScript 示例 ”复选框。
记录页面。
以下两张图显示了禁用和启用 JavaScript 样本的区别。 禁用 JavaScript 采样时，录制 的主要部分要 短得多，因为录制忽略了 JavaScript 调用堆栈。
禁用 JS 示例时的录制示例：
启用 JS 示例时的录制示例：
录制时限制网络
若要在录制时限制网络：
在“性能”工具中，单击“记录设置” (“
) ”按钮。 请参阅上方 的显示录制设置。将 网络 设置为所需的限制级别。
“网络”工具的选项卡上会显示一个警告图标，提醒已启用限制。
录制时限制 CPU
若要在录制时限制 CPU，请执行以下操作：
在“性能”工具中，单击“记录设置” (“
) ”按钮。 请参阅上方 的显示录制设置。将 CPU 设置为所需的限制级别。
“ 性能 ”工具的选项卡上会显示一个警告图标，提醒已启用限制。
限制与计算机的功能相关。 例如， 2 倍减速 选项使 CPU 运行速度是正常速度的两倍。 DevTools 并不能真正模拟移动设备的 CPU，因为移动设备的体系结构与台式机和笔记本电脑的体系结构截然不同。
启用 CSS 选择器统计信息
若要在长时间运行的 “重新计算样式 ”事件期间查看 CSS 规则选择器的统计信息，请执行以下操作：
单击“记录设置 (
) ”按钮。 请参阅上方 的显示录制设置。选择“ 启用 CSS 选择器统计信息 (慢) ”复选框。
有关详细信息，请参阅 在重新计算样式事件期间分析 CSS 选择器性能。
启用高级画图检测工具
查看详细画图检测工具：
单击“记录设置 (
) ”按钮。 请参阅上方 的显示录制设置。选择“ 启用高级绘制检测 (慢) ”复选框。
要了解如何与绘制信息交互，请参阅下面的“ 查看图层”信息和下面的“ 查看绘制分析器”。
为录制内容添加批注并共享
记录性能跟踪后，您可以对其进行分析并对其进行注释以共享您的发现。
要为录制内容添加批注，请打开“性能”工具边栏中的“批注”选项卡。 如果边栏不可见，请点按“ 显示边栏 ” 
) ”按钮。
边栏中的“ 注释” 选项卡最初包含有关如何添加注释的说明。 创建注释后，如下所示，该选项卡会列出现有注释，并允许您删除它们。
有几种方法可以添加批注：
标记项目：若要在性能跟踪中标记项目，请双击该项目，在文本框中输入标签，然后按 Enter。
连接两个项：若要在性能跟踪中的两个项之间绘制箭头，请双击第一个项，单击它旁边的箭头图标，然后单击第二个项。
标记时间范围：若要在性能跟踪中绘制和标记任意时间范围，请按住 Shift 键并从时间范围的开头拖动到末尾，在显示的文本框中输入标签，然后按 Enter。
例如，在新窗口或选项卡中打开 活动选项卡 演示网页，创建性能录制，然后执行上述三个操作。 结果：
在本示例中，包括：
- 三个批注。
- 连接两个批注的箭头批注。
- 以粉红色突出显示的带批注的时间范围。
“ 注释” 选项卡显示其选项卡名称旁边的注释数量;在本例中，为 5。
要删除注释，请在“ 注释 ”选项卡中将鼠标悬停在注释上，然后单击其旁边的 “删除” 按钮。
若要从性能跟踪中隐藏批注，请选择“批注”选项卡底部的“隐藏批注”。
保存和共享录制内容
要将录制内容另存为设备上的文件，然后将其与带批注的性能发现共享，请在 性能 工具顶部的操作栏中，单击保存 配置文件 (保存 
) 按钮，然后选择 保存跟踪。
或者，选择 保存不带批注的跟踪。
可以右键单击录制内容的轨道，然后选择“保存配置文件”，而不是单击顶部的“保存配置文件) ”按钮：
加载录制
要从文件加载录制内容，请单击“性能”工具顶部操作栏中的“加载配置文件
) ”按钮。
如果跟踪中存在批注，则 性能 工具将显示它们。
或者，右键单击 “性能 ”工具，然后选择 “加载配置文件”：
可以在现有录制内容中右键单击，也可以在没有录制内容时右键单击“ 性能 ”工具中显示的屏幕。
清除上一记录
录制后，若要从“ 性能 ”工具中删除该录制，请单击 清除录制 (
) 按钮：
分析性能录制
在记录运行时性能或记录加载性能后，性能工具将显示有关记录的大量数据。 使用记录的数据来分析网页的性能。
获取可操作的见解
性能工具从记录的性能数据中提取可操作的见解。 这些见解是您可以提高网站性能的方法。 见解包括：
- INP by phase
- LCP 按阶段分
- LCP 请求发现
- 布局偏移的罪魁祸首
- 阻止渲染请求
- 网络依赖项树
- 改进图像传递
- 文档请求延迟
- 字体显示
- 针对移动设备优化视区
- 优化 DOM 大小
- 第三方
- CSS 选择器成本
- 强制回流
- 使用高效的缓存生存期
这些见解侧重于改进 Core Web Vitals 指标以及优化网页加载和呈现的速度。
在 “性能 ”工具中记录配置文件后，边栏中的 “见解” 选项卡将显示适用于记录的性能数据的可操作见解列表。 若要查看不适用于配置文件的见解列表，请参阅 “已通过的见解 ”部分。
若要使用见解：
根据上面的 “录制性能”进行性能录制。
在 性能 工具的左侧边栏中，选择“ 见解 ”选项卡，展开不同部分，然后将鼠标悬停在并单击项目上。 性能工具突出显示跟踪中的相应事件：
如果边栏和 见解 选项卡不可见，请单击显示 边栏 (显示
按钮。
导航录制内容
要仔细检查您的演奏录音，您可以选择录音的一部分、滚动长火焰图、放大和缩小，以及使用痕迹导航在缩放级别之间跳转。
使用键盘快捷方式进行导航
要使用键盘快捷键快速导航录制内容，请首先选择您喜欢的键盘导航样式，如下所示：
在 性能 工具的右上角，单击“ 显示快捷方式 ” (“显示
) “按钮，然后选择 ”现代 “或 ”经典 “选项按钮。“键盘快捷键”对话框显示所选映射选项的可用快捷键。
选择“ 现代 选项”按钮时：
- 若要缩放： Command/Ctrl + 鼠标滚轮。
- 垂直滚动：鼠标滚轮。
- 水平滚动： Shift + 鼠标滚轮。
选择“ 经典 ”选项按钮时：
- 若要缩放：鼠标滚轮或触摸板向上或向下。
- 垂直滚动： Shift + 鼠标滚轮。
- 到水平滚动： Shift + 向左键|向右键
其他快捷方式：
按 W 或 S 进行缩放。
按 A 或 D 左右平移。
选择录制的一部分
在记录的顶部，显示 时间线概述 部分，包括右) 所示的 CPU 和 NET 图表 (：
若要选择录制的一部分，请在 时间线概览中，单击并水平拖动：
若要使用键盘选择一部分：
聚焦于 主 轨道或其任何相邻轨道。
使用 W、 A、 S、 D 键分别进行放大、向左移动、缩小和向右移动。
若要使用触控板选择部分：
将鼠标悬停在 时间线概览 部分或 Main 及其相邻部分) (的任何轨道上。
使用两根手指，向上轻扫可缩小，向左轻扫可向左移动，向下轻扫可放大，向右轻扫可向右移动。
你可以使用鼠标、键盘或触控板选择录音的一部分。
鼠标：
使用鼠标选择录制的一部分：
- 在 概述上向左或向右拖动鼠标。 概述是包含 CPU 和 NET 图表的部分：
要在 主 部分或任何相邻部分中滚动长火焰图，请单击并按住鼠标同时上下拖动。 向左或向右拖动以移动选择录制内容的哪个部分。
键盘：
使用键盘选择录音的一部分：
选择 主 部分的背景，或选择 主 部分旁边的部分的背景，例如 交互、 网络或 GPU。 仅当这些部分之一具有焦点时，此键盘工作流才有效。
按
W或 可S放大或缩小。按 或D向A左或向右移动。
触控板：
使用触控板选择录音的一部分：
将鼠标悬停在 “概述 ”部分或 “详细信息 ”部分。 “概述”部分是包含 FPS、CPU 和 NET 图表的区域。 详细信息部分是包含主部分和交互部分的区域。
使用两根手指向上轻扫可缩小，或向下轻扫可放大。 使用两根手指向左轻扫，向右轻扫向右。
放大录制的某些部分并在缩放级别之间切换
时间线概览允许您连续放大录制的某些部分，并在每个步骤处创建痕迹导航，然后您可以在这些缩放级别之间切换。
若要放大部分录制内容并使用痕迹导航：
在 “时间线概览”中， 选择上述录制内容的一部分 () 。
将鼠标悬停在所选内容上，然后单击“ N 毫秒 ” (“
) ”按钮：
所选内容将展开以填充 “时间线”概览。 痕迹导航链开始在 时间线概述顶部生成。
重复前两个步骤以创建另一个嵌套痕迹导航。 只要选择范围大于 5 毫秒，就可以继续嵌套痕迹导航。
要跳转到所选缩放级别，请点击 时间线概览顶部链中相应的痕迹导航。
若要删除痕迹导航的子级，请右键单击父痕迹导航，然后选择 “删除子痕迹导航”：
滚动长火焰图
要在 主 轨道或其任何相邻轨道中滚动长火焰图，请单击并按住，然后向任何方向拖动，直到您正在寻找的内容进入视野。
搜索活动
可以搜索 主要 轨道中的活动和 网络 轨道中的请求。
若要打开 性能 工具底部的搜索框，请执行以下操作：
按 Ctrl+F (Windows、Linux) 或 Command+F (macOS) 。
查找框显示在性能工具的底部：
在 “查找 ”框中，输入查询，如“重新计算样式”。
键入时，匹配的活动将在 “主要 ”部分中突出显示，并且匹配的总数将显示在搜索框中。 已选择第一个匹配的活动，以蓝色轮廓显示：
若要在与查询匹配的活动之间导航：
若要选择下一个活动，请按 Enter 或单击 “下一个 (下
) ”按钮。若要选择上一个活动，请按 Shift+Enter 或单击“ 上一个 (上
”按钮。
性能 工具在 搜索框中选择的活动上显示工具提示。
修改查询设置：
要在查询中使用正则表达式，请单击启用 正则表达式
) 按钮。 如果选择 “正则表达式 ”按钮，然后输入 ^E.*，可查找任何活动以及以字母 E 开头的任何活动。若要使查询区分大小写，请单击 “启用区分大小写的搜索 ”
) 按钮。
若要隐藏搜索框，请单击“ 取消 ”按钮。
更改曲目的顺序并将其隐藏
要整理性能轨迹，您可以在轨迹配置模式下更改轨迹顺序并隐藏不相关的轨迹。
若要移动和隐藏曲目：
要进入配置模式，请右键单击轨道名称，然后选择 配置轨道。
单击“ 向上移动轨道 ” (“向上
) ”按钮，或单击“ 向下移动轨道 ” (“向下 
) ”按钮来向上或向下移动轨道。 单击“ 隐藏轨道 ” (“ 
) ”按钮将其隐藏。右键单击轨道，然后选择“ 完成配置”。
性能工具还会将跟踪配置应用于新跟踪，除非关闭然后重新打开 DevTools。
查看主线程活动
使用 Main 部分查看出现在页面主线程上的活动：
选择一个事件以在 摘要 选项卡中查看有关该事件的详细信息。DevTools 概括了所选事件：
DevTools 使用火焰图表示主线程活动：
x 轴表示一段时间内的记录。 Y 轴表示调用堆叠。 靠近顶部的事件会导致其下方的事件;例如，在上图中，一个 input 事件导致 Function Call了一个 ，该函数运行了一个匿名函数，该函数调用 filterByCamera 了 然后 populateGallery调用 . 然后，该 populateGallery 函数通过调用 set innerHTML进行了 DOM 更改。
DevTools 为脚本随机分配颜色。 在上图中，脚本的函数请求用紫红色 (紫粉色) 。 深黄色表示脚本活动，紫色事件表示呈现活动。 这些较深的黄色和紫色事件在所有记录中是一致的。
若要隐藏 JavaScript 请求的详细火焰图，请参阅上面的 禁用 JavaScript 示例。
禁用 JavaScript 示例后，仅显示高级事件，例如 Event: input 上图中的事件 Function Call 。
阅读火焰图
性能工具表示火焰图中的主线程活动。 x 轴表示一段时间内的记录。 Y 轴表示调用堆叠。 顶部事件将导致以下事件。
性能工具为脚本随机分配颜色，以分解火焰图并使其更具可读性。
长任务也用红色三角形突出显示，超过 50 毫秒的部分用红色阴影显示。
此外， 主 轨道还显示有关启动和停止的 profile() CPU 配置文件以及 profileEnd() 控制台功能的信息。
若要隐藏 JavaScript 调用的详细火焰图，请参阅禁用 JavaScript 示例。 禁用 JS 示例时，只能看到高级事件，例如 Event (click) 和 Function Call。
跟踪事件发起者
主轨道可以显示连接以下发起程序及其引发的事件的箭头：
- 样式或布局失效 ->重新计算样式或布局
- 请求动画帧 ->动画帧触发
- 请求空闲回调 ->触发空闲回调
- 安装计时器 ->计时器触发
- 创建 WebSocket ->send... 并 接收 WebSocket 握手 或 销毁 WebSocket
- 计划 postTask ->fire postTask 或 中止 postTask
若要查看箭头，请在火焰图中找到发起程序或其引发的事件，然后选择它。
选中后，“ 摘要” 选项卡将显示发起程序链接 的发起程序 和发起程序导致的事件链接的发 起程序 。 单击它们可在相应的事件之间跳转。
在火焰图中隐藏函数及其子级
若要整理 主 线程中的火焰图，可以隐藏选定函数或其子级：
在 主 轨道中，右键单击某个功能并选择以下选项之一或按相应的快捷键：
- Hide function (H)
- 隐藏子项 (C)
- 隐藏重复的子项 (R)
- 将子女重置 (U)
- 重置跟踪 (T)
- 添加脚本以忽略列表 (我)
数字隐藏下拉列表 (数字
按钮显示在具有隐藏子级的函数名称旁边。若要查看隐藏子级的数量，请将鼠标悬停在“ 隐藏的数字 ”
拉列表 (“隐藏的数字) ”按钮上。要重置具有隐藏子项或整个火焰图的函数，请选择该函数并按 U 键或右键单击任何函数并分别选择 重置跟踪 。
忽略火焰图中的脚本
要将脚本添加到忽略列表，请右键单击图表中的脚本，然后选择添加 要忽略列表的脚本。
图表会折叠忽略的脚本，将其标记为“忽略”列表，并将其添加到“自定义和控制 DevTools”中的“自定义和控制 DevTools” (“设置>忽略”列表中) > 自定义
。 忽略的脚本将一直保存，直到将它们从跟踪中或从 自定义排除规则中移除。
查看表格中的活动
记录页面后，除了用于分析活动的 Main 部分外，DevTools 还提供三种用于分析活动的表格视图。 每个视图都为您提供有关活动的不同视角：
为了帮助你更快找到要查找的内容，所有三个选项卡在 筛选栏 旁边都有用于高级筛选的按钮：
“ 启用正则表达式” (
) 按钮。“ 启用区分大小写的搜索 ” (
) 按钮。
性能工具中的每个表格视图都显示活动的链接，例如函数调用。 为了帮助你调试，DevTools 在源文件中查找相应的函数声明。 此外，如果存在并启用了相应的源映射，则 DevTools 将自动查找原始文件。
单击链接以在 “源” 工具中打开源文件。
接下来的三节均引用同一演示。 你可以在“ 活动选项卡 ”演示“中自行运行演示，并在 MicrosoftEdge / 演示 > /devtools-performance-activitytabs/ 查看源代码。
根活动
下面是“ 调用树 ”选项卡、“自 底向上 ”选项卡和 “事件日志 ”部分中提到的根活动概念的说明。
根活动 是导致浏览器执行某些工作的活动。 例如，单击网页时，浏览器将运行活动 Event 作为根活动。 该 Event 活动可能会导致其他活动运行，例如处理程序。
在 主要 部分的火焰图中，根活动位于图表顶部。 在 “调用树 ”和 “事件日志 ”选项卡中，根活动是顶级项。
有关根活动的示例，请参阅下面的 调用树选项卡。
调用树选项卡
使用 调用树 选项卡查看哪些 根活动 导致了最多的工作。
呼叫树选项卡仅显示录制的选定部分期间的活动。 若要了解如何选择录音的一部分，请参阅上方 的选择录音的一部分。
在上图中， “活动 ”列中的顶级项（例如 Event Timing）是根活动。 嵌套表示调用堆栈。 例如，在上图中， Event Timing 导致 Event: mouseup了 ，这导致 Function Call了 ， (anonymous)以此类推。
自我时间 表示直接花费在该活动中的时间。 总时间 表示在该活动或任何子项上花费的时间。
单击 “自我时间”、“ 总时间”或 “活动 ”以按该列对表格进行排序。
使用 “筛选器” 文本框按活动名称筛选事件。
默认情况下， “分组” 菜单设置为“ 无分组”。 使用 “分组 ”菜单可以根据各种条件对活动表进行排序。
单击显示 最重堆叠 (
) 以显示 活动 表右侧的另一个表。 单击活动以填充 最重堆叠 表。 “ 最重堆栈” 表显示所选活动的哪些子项运行时间最长。
自底向上的选项卡
使用 Bottom-up 选项卡查看哪些活动直接占用了聚合时间最多。
“ 自下而上” 选项卡仅在录制的选定部分显示活动。 若要了解如何选择录音的一部分，请参阅上方 的选择录音的一部分。
在上图 的主要部分火焰 图中，几乎所有的时间都花费在运行 a、 b和 c 函数上。 上图自下而上选项卡中排名靠前的活动还有 a、 和 bc。 在 “自下而上 ”选项卡中，下一个成本最高的活动是 Minor GC。
“自我时间”列表示直接在该活动中花费的所有活动的聚合时间。
“总时间”列表示在该活动或任何子项中花费的聚合时间。
“事件日志”选项卡
使用 事件日志 选项卡按活动在记录期间发生的顺序查看活动。
“ 事件日志 ”选项卡仅显示所选部分录制期间的活动。 若要了解如何选择录音的一部分，请参阅上方 的选择录音的一部分。
“ 开始时间 ”列表示该活动相对于录制开始时的开始点。 例如，上图中所选项目的开始 925.0 ms 时间意味着录制开始 925.0 毫秒后活动开始。
“自我时间”列表示直接在该活动中花费的时间。
“总时间”列表示直接在该活动或任何子项中花费的时间。
单击 “开始时间”、“ 自我时间”或“ 总时间 ”列标题，以按该列对表进行排序。
使用 “筛选器 ”文本框按名称筛选活动。
使用 “持续时间 ”菜单筛选出任何花时少于 1 毫秒或 15 毫秒的活动。 默认情况下， “持续时间” 菜单设置为“ 全部”，这意味着显示所有活动。
清除“加载”、“脚本”、“渲染”或“绘制”复选框以筛选掉这些类别中的所有活动。
查看性能标记
在性能跟踪上带有垂直线的叠加层中，您可以看到重要的性能标记，例如：
- FP) (首次绘制
- 第一次绘制 (MDN 术语表中的 FP) 。
- 第一个 Contentful Paint (FCP)
- MDN 术语表中的第一个 Contentful Paint (FCP) 。
- MDN 的 PerformancePaintTiming。
- LCP) 最大的内容绘图 (
- MDN 术语表中内容最大的绘图 (LCP) 。
- MDN 的 LargestContentfulPaint。
- DCL) (DOMContentLoaded 事件
- 加载事件 (L)
- Onload 事件 (L) at MDN。
将鼠标悬停在跟踪底部的标记名称上以查看其时间戳。
查看自定义计时
在 Timings 轨道上，查看自定义性能标记，例如：
performance.mark()调用。performance.measure()调用。
选择一个标记以在 “摘要 ”选项卡中查看更多详细信息，包括其时间戳、总时间、自时间和 detail 对象。 对于 performance.mark() 和 performance.measure() 调用，该选项卡还显示堆栈跟踪。
查看交互
使用 “交互 ”部分查找和分析录制期间发生的用户交互：
交互底部的红线表示等待主线程所用的时间。
单击交互以在 摘要 选项卡中查看有关交互的更多信息。
查看布局偏移
在“布局排班”轨道上查看布局排班。排班显示为紫色菱形，并根据排班在时间线上的接近程度) 以紫色线条 (簇分组。
要在视区中突出显示导致布局偏移的元素，请将鼠标悬停在相应的菱形上。
要在 “摘要 ”选项卡中查看有关布局偏移的更多信息，包括时间、分数、元素和潜在的罪魁祸首，请单击相应的菱形或簇。
有关详细信息，请参阅 MDN 的 累积布局偏移 (CLS) 。
查看动画
在 “动画 ”轨道上查看动画。动画命名为相应的 CSS 属性或元素（如果有），例如 transform OR my-element。 非合成动画在右上角用红色三角形标记。
选择动画以在 摘要 选项卡中查看更多详细信息，包括合成失败的原因。
查看 GPU 活动
在“性能”工具的“GPU”部分查看 GPU 活动：
查看光栅活动
查看 线程池 部分中的光栅活动。
分析每秒帧数 (FPS)
DevTools 提供两种方法来分析每秒帧数：
使用 Frames 部分查看特定帧所需的时间。 请参阅下面的 “帧”部分。
在页面运行时，使用 FPS 计数 来实时估计 FPS。 请参阅下面的 FPS 计数实时查看每秒帧数。
“帧”部分
“帧”部分会准确告诉你特定帧所花费的时间。
将鼠标悬停在框架上可查看工具提示，其中包含有关该帧的详细信息：
上面的示例显示了将鼠标悬停在帧上时的工具提示。
“帧”部分可以显示四种类型的帧：
空闲帧 (白色) 。 无更改。
框架 (绿色) 。 按预期及时呈现。
部分呈现的框架 (黄色，) 有稀疏的宽虚线图案。 Microsoft Edge 已尽最大努力及时呈现至少一些视觉更新。 例如，如果渲染器进程 (画布动画) 的主线程的工作延迟，但滚动) (合成器线程及时。
掉落的框架 (红色，) 带有密集的实线图案。 Microsoft Edge 无法在合理的时间内呈现帧。
单击帧可在性能工具底部的摘要选项卡中查看有关帧的更多信息。 DevTools 用蓝色勾勒出所选框架的轮廓：
查看网络请求
展开 “网络 ”部分，查看录制期间发生的网络请求的瀑布图：
单击请求以在 摘要 选项卡中查看有关它的更多信息：
“网络”部分中的请求按如下颜色编码：
- 蓝色背景：HTML 请求。
- 紫色背景：CSS 请求。
- 深黄色背景：JS 请求。
- 绿色背景：图像请求。
请求的左上角有方块：
- 请求左上角的深蓝色方块表示它是优先级较高的请求。
- 浅蓝色的方块表示优先级较低。
例如，在上图中，位于“网络”部分左上角的照片库请求具有较高优先级。
请求的左右两侧可能有线条，并且其条形图可能拆分为两种颜色。 下面是这些线条和颜色所代表的：
左行是事件组的所有
Connection Start内容（含）。 换句话说，这是之前Request Sent的一切，独家。条形图的浅部分为
Request Sent和Waiting (TTFB)用于服务器响应。条形图的深色部分为
Content Download。正确的行本质上是等待主线程所花费的时间。 “ 计时 ”选项卡中未显示此情况。
查看内存指标
选中 “内存 ”复选框以查看性能记录中的内存指标：
开发人员工具在“摘要”选项卡上方显示内存图表。NET 图表下方还有一个图表，称为 HEAP。 堆图表提供与内存图表中的 JS 堆线相同的信息：
图表上的彩色线对应到图表上方的彩色复选框。 清除复选框可从图表中隐藏该类别。
图表只显示当前选择的记录区域。 例如，在上图中， 内存 图表仅显示从 3600 毫秒标记上下到 6200 毫秒标记左右的内存使用情况。
另请参阅：
查看部分录制的持续时间
在分析 Network 或 Main 等部分时，有时您需要更精确地估计某些事件花了多长时间。 按住 Shift，单击并按住，然后向左或向右拖动以选择录音的一部分。 在所选内容底部，DevTools 显示该部分所话费的时间：
查看屏幕截图
要了解如何打开屏幕截图，请参阅上面的录制时记录屏幕截图。
若要查看该页面在录制过程中的屏幕截图，请将鼠标悬停在 “概述”上。 概述是包含 CPU 和 NET 图表的部分：
也可以通过在 帧 部分选择帧来查看屏幕截图。 DevTools 在“ 摘要 ”选项卡中显示屏幕截图的较小版本：
若要放大屏幕截图，请单击 “摘要 ”选项卡中的缩略图。
查看图层信息
查看框架的高级图层信息：
在“性能”工具中，单击“记录设置 (
) ”按钮，然后选中“启用高级渲染检测 (慢速) ”复选框。在 “帧” 部分，选择一个帧。 开发人员工具在性能工具底部的“层”选项卡中显示有关层的信息：
图层选项卡的工作方式类似于 3D 视图工具中的复合层选项卡。 若要了解如何与 “层 ”选项卡交互，请参阅 使用 3D 视图工具导航网页层、z 索引和 DOM。
查看绘图探查器
查看有关绘图事件的高级信息：
在“性能”工具中，单击“记录设置 (
) ”按钮，然后选中“启用高级渲染检测 (慢速) ”复选框。在主部分选择一个绘制事件。 DevTools 在绘 图探查器 选项卡中显示有关绘图事件的信息：
查看 CSS 选择器统计信息
若要查看有关在性能录制期间重新计算的 CSS 规则选择器的统计信息，请执行以下操作：
在“性能”工具中，单击“记录设置 (
) ”按钮，然后选中“启用高级渲染检测 (慢速) ”复选框。DevTools 在“ 选择器统计信息 ”选项卡中显示有关记录期间重新计算的 CSS 规则选择器的聚合信息：
- 在 “主 ”部分中，选择“ 重新计算样式” 事件。 在 选择器统计信息 选项卡中，DevTools 显示有关在该事件期间重新计算的 CSS 规则选择器的信息。
另请参阅：
查看窗口、iframe 和专用工作线程之间的消息
DevTools 试验“性能”面板：显示 postMessage 调度和处理流改进了“性能”工具的“主要”部分，通过区分由方法postMessage触发的事件与“性能”工具中显示的其他事件，帮助你快速识别postMessage事件和处理程序。 此试验可帮助你调查与跨应用程序的各个线程发布消息相关的性能问题。
如果没有此试验，通过在应用程序线程之间调度和处理消息触发的事件将显示为通用脚本函数调用事件。 启用此试验后：
-
postMessage调度事件显示为 计划 postMessage。 -
postMessage处理程序事件显示为 On Message：
此试验可帮助你调查调用何时 postMessage 发生，以及处理程序启动前 postMessage 消息排队的时间。 调度事件通过单击任一类型的事件时出现的发起程序箭头链接到处理程序事件：
若要使用此功能，请在 DevTools 中选择“自定义和控制 DevTools”>“设置>试验”中选中复选框“性能”面板：显示 postMessage 调度和处理流，单击“关闭 (X) ”按钮，然后单击“重新加载 DevTools”按钮。
另请参阅：
查看 WebSocket 消息
WebSocket 活动显示在“性能”工具的“网络”轨道中，以帮助将 JavaScript 活动与 WebSocket 消息相关联。 这可以帮助确定延迟问题是来自客户端对消息的解析，还是来自服务器的响应。
若要在 性能 工具中查看 WebSocket 消息，请执行以下操作：
转到在新窗口或选项卡中发送 WebSocket 消息的网页，例如 简单聊天应用。
右键单击该网页，然后选择 “检查”。
DevTools 随即打开。
在 “活动栏”中， 选择工具) “性能 (性能”
。在 性能 工具的左上角，单击 录制 (
) 按钮。在聊天网页的“ 用户名 ”文本框中，输入一个名称，例如“John”，然后单击“ 连接 ”按钮。
在聊天表单底部，将显示一条消息，例如“John：v8g...已连接“。
在 “发送消息” 文本框中，输入一条消息，如“Hello”，然后单击“ 发送 ”按钮。
在聊天应用中，显示消息，如“Hello”：
生成 WebSocket 流量。
在 “性能 ”工具的左上角，单击“ 停止 ” (“
按钮。或者，在 “性能 ”工具的中间，单击“ 停止 ”按钮。
在性能工具中，将显示时间线。
展开 “网络” 轨道。
单击金色竖线。
在 “性能 ”工具底部的 “摘要 ”选项卡中，显示有关所选 WebSocket 消息的信息，例如：
- 发送 WebSocket 握手
- 接收 WebSocket 握手
- 接收 WebSocket 消息：
另请参阅：
- 分析网络功能参考中的 WebSocket 连接的消息。
- 跟踪事件发起者，如上所示。
- 分析运行时性能 (教程)
使用 “渲染” 工具分析渲染性能
使用 “渲染” 工具帮助可视化页面的渲染性能。 渲染工具是一个快速视图工具;如果从命令菜单中打开它，它将在 DevTools 的底部打开。
若要打开 渲染 工具：
在新窗口或选项卡中打开网页，例如 Sluggish Animation。
右键单击该网页，然后选择 “检查”。
DevTools 随即打开。
如果未显示“快速视图”面板，请选择“自定义和控制 DevTools” (“自定义
>“切换快速视图”面板。或者按 Esc。
在 “快速视图 ”工具栏上，单击“ 更多工具 ”
“按钮，然后选择 ”渲染“。渲染工具在快速视图面板中打开：
另请参阅：
使用 FPS 计数实时查看每秒帧数
FPS 计数是出现在呈现网页左上角的叠加。 它提供了页面运行时 FPS 的实时估计。 若要打开 FPS 计数：
打开 渲染 工具。 请参阅上面的 使用“渲染”工具分析渲染性能。
选择帧 渲染统计信息 复选框。 FPS 计数覆盖显示在呈现的网页中：
使用绘画闪烁实时查看绘画事件
使用绘图闪烁可以获取页面上所有绘图事件的实时视图。 每当重新绘制页面的一部分时，DevTools 就会用绿色勾勒出该部分的轮廓。
若要打开绘画闪烁：
打开 渲染 工具。 请参阅上面的 使用“渲染”工具分析渲染性能。
选择“ 绘画闪烁 ”复选框。 呈现的网页中显示绿色轮廓：
使用 “图层边框” 查看图层的叠加
若要查看页面顶部图层边框和磁贴的叠加，请执行以下操作：
打开 “渲染” 工具，如上面的 “使用”渲染“工具分析渲染性能中所述。
选择 “图层边框” 复选框。 层边框显示在呈现的网页中：
有关颜色编码的说明，请参阅 debug_colors.cc 中的注释。
实时查找滚动性能问题
使用 “滚动性能问题 ”复选框确定页面元素，这些元素具有可能损害页面性能的与滚动相关的事件侦听器。 DevTools 概述了茶色中潜在的问题元素。
查看滚动性能问题：
打开 “渲染” 工具，如上面的 “使用”渲染“工具分析渲染性能中所述。
选中 “滚动性能问题 ”复选框。 概述了潜在的问题元素：
另请参阅：
- 慢速滚动矩形 (复选框) 使用 3D 视图工具导航网页层、z 索引和 DOM。
禁用本地字体
在“渲染”工具中，使用“禁用本地字体”复选框模拟规则中@font-face缺少local()的源。
例如，如果在设备上安装了 Rubik 字体，并且 @font-face src 规则将其用作 local() 字体，则 Microsoft Edge 将使用设备中的本地字体文件。
选择“ 禁用本地字体” 后，DevTools 将忽略字体， local() 并从网络中提取每个字体：
如果在开发过程中使用同一字体的两个不同副本，则此功能非常有用，例如：
- 设计工具的本地字体。
- 用于代码的 Web 字体。
使用 “禁用本地字体” 可以更轻松地执行以下操作：
- 调试和测量 Web 字体的加载性能及优化。
- 验证 CSS
@font-face规则的正确性。 - 发现设备上安装的本地版本与 Web 字体之间的差异。
可视化内存泄漏 (性能工具：“内存复选框) ”
作为调查网页内存使用情况的起点，请使用 “性能 ”工具的 “内存 ”复选框。 (或者， (浏览器任务管理器实时监视内存使用情况) .)
性能工具有助于直观显示页面在一段时间内的内存使用情况。
在 DevTools 中，打开 “性能 ”工具。
选中 “内存 ”复选框。
根据上述 记录性能进行录制。
最好使用强制垃圾回收来开始和结束录制。 若要强制收集垃圾，请在录制时单击“ 收集垃圾强制 ”按钮。
若要演示内存记录，请考虑以下代码：
var x = [];
function grow() {
for (var i = 0; i < 10000; i++) {
document.body.appendChild(document.createElement('div'));
}
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
每次单击代码中引用的按钮时，都会将 10,000 div 个节点追加到文档正文，并将一个包含 1,000,000 x 个字符的字符串推送到数组中 x 。 运行前面的代码会在 “性能 ”工具中生成一个录制：
首先，用户界面的说明。 “概述”窗格中的堆图 (NET) 下方表示 JS 堆。 “概述”窗格下方是“计数器”窗格。 内存使用情况按 JS 堆细分 (与“概述”窗格中的堆图相同) 、文档、DOM 节点、侦听器和 GPU 内存。 清除复选框以将其从图形中隐藏。
现在，将代码与上图进行比较。 如果查看节点计数器 (绿色图形) ，它与代码完全匹配。 节点计数以离散步长递增。 可以假设节点计数的每次增加都是对 grow()的调用。
蓝色图) (JS 堆图并不那么简单。 根据最佳做法，第一次下降实际上是强制垃圾回收， (单击“ 收集垃圾强制 ”按钮) 。
随着记录的进行，将显示 JS 堆大小峰值。 这是自然且意料之中的：JavaScript 代码在你单击的每个按钮上创建 DOM 节点，并且在创建一百万个字符的字符串时会做大量工作。
这里的关键一点是，JS 堆的结尾高于它的开始位置， (这里的“开始”是强制垃圾收集) 之后的点。 在现实世界中，如果您看到这种增加 JS 堆大小或节点大小的模式，则可能表示内存泄漏。
另请参阅：
注意
此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面可在 此处 找到，作者为 Kayce Basques。
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。