本页全面介绍了与分析性能相关的 Chrome 开发者工具功能。
如需查看有关如何使用 Chrome 开发者工具分析网页性能的指导教程，请参阅分析运行时性能。
实时指标界面
首次打开性能面板时，您会看到“实时指标”屏幕，其中会使用三个Core Web Vitals为您提供当前网页的即时性能摘要。
当您与页面互动并导航到新页面（包括单页应用中的客户端软导航，由 SOFT NAV 标记表示）时，这些指标会更新。这是一种发现性能问题的好方法，尤其是对于仅在特定情况下出现的 INP 和 CLS 问题。在性能问题持续重复出现后，您可以录制跟踪记录，以获取更多详细信息来调试底层问题。
实时指标界面功能
除了指标之外，实时指标屏幕还具有以下功能：
- 在实测数据面板中启用后，来自 CrUX 的实测数据。
- 本地指标和现场指标之间的任何显著差异的摘要。
- LCP 元素，将鼠标悬停在上面即可在网页上突出显示该元素。
- CLS 聚类和 INP 类型的详细信息
- 有关将鼠标悬停在指标上时显示的详细信息（例如 LCP 和 INP 子部分，以及真实用户直方图）
- 互动和布局偏移面板，用于记录互动和布局偏移的历史记录。
- 实测指标面板，可用于启用 CrUX 数据、查看该数据的时间段详情，以及在源数据和网址数据（如有）之间以及桌面设备数据和移动流量之间切换。
- 一个环境设置面板，其中包含基于 CrUX 数据的建议，可指导您使用哪种设备、CPU 和网络节流。
如需了解详情，请参阅在开发者工具中监控本地和真实用户的 Core Web Vitals 性能博文。
创纪录的表现
您可以使用屏幕左上角或右上角的按钮记录运行时或加载性能：
记录运行时性能
如果您想分析网页在运行（而非加载）时的性能，请记录运行时性能。
- 前往您要分析的网页。
- 点击开发者工具中的性能标签页。
- 点击录制图标
。 - 与网页互动。开发者工具会记录因您的互动而发生的所有网页活动。
- 再次点击录制或点击停止即可停止录制。
记录加载性能
如果您想分析网页在加载（而非运行）时的性能，请记录加载性能。
- 前往您要分析的页面。
- 打开开发者工具的性能面板。
- 点击记录并重新加载
。首先，开发者工具会导航到 about:blank以清除所有剩余的屏幕截图和轨迹。然后，开发者工具会在网页重新加载时记录效果指标，并在加载完成几秒后自动停止记录。
开发者工具会自动放大录制内容中发生大部分活动的部分。
在此示例中，Performance 面板显示了网页加载期间的活动。
在录制时截取屏幕截图
选中屏幕截图复选框可在录制时截取每一帧的屏幕截图。
如需在内存预算范围内自定义视觉记录保真度，请打开捕获设置 
，然后从屏幕截图捕获下拉菜单中选择帧大小和计数上限预设。
请参阅查看屏幕截图，了解如何与屏幕截图互动。
在录制时强制执行垃圾回收
在录制网页时，点击 Collect garbage（收集垃圾）图标 以强制执行垃圾回收。
显示录制设置
点击捕获设置
，以显示与开发者工具如何捕获性能录制相关的更多设置。
停用 JavaScript 示例
默认情况下，录制的主轨道会显示录制期间调用的 JavaScript 函数的详细调用堆栈。如需停用这些调用堆栈，请执行以下操作：
- 打开捕获设置
菜单。请参阅显示录制设置。 - 选中停用 JavaScript 采样复选框。
- 录制页面。
以下屏幕截图显示了停用和启用 JavaScript 示例之间的区别。如果停用抽样，录制的主轨道会短得多，因为它会省略所有 JavaScript 调用堆栈。
此示例显示了停用 JS 示例的录制。
此示例展示了启用 JS 示例的录制。
录制时限制网络速度
如需在录制时限制网络，请执行以下操作：
- 打开捕获设置
菜单。请参阅显示录制设置。 - 将网络设置为所选的节流级别。
在下拉菜单中，Performance 面板可能还会根据字段数据推荐默认节流预设或近似于用户体验的预设。
在录制时限制 CPU
如需在录制时限制 CPU，请执行以下操作：
- 打开拍摄设置
菜单。请参阅显示录制设置。 - 将 CPU 设置为所选的节流级别。
节流是相对于计算机的功能而言的。例如，2x slowdown 选项会使 CPU 的运行速度比平时慢 2 倍。DevTools 无法真正模拟移动设备的 CPU，因为移动设备的架构与桌面设备和笔记本电脑的架构截然不同。
在下拉菜单中，效果面板还可能会根据实地数据推荐默认的节流预设或近似于用户体验的预设。
启用 CSS 选择器统计信息
如需在长时间运行的重新计算样式事件期间查看 CSS 规则选择器的统计信息，请执行以下操作：
- 打开拍摄设置
菜单。请参阅显示录制设置。 - 勾选启用 CSS 选择器统计信息复选框。
如需了解详情，请参阅如何在“重新计算样式”事件期间分析 CSS 选择器性能。
启用高级绘制插桩
如需查看详细的绘制插桩，请执行以下操作：
- 打开捕获设置 菜单。请参阅显示录制设置。
- 勾选启用高级绘制插桩复选框。
如需了解如何与绘制信息进行交互，请参阅查看图层和查看绘制性能分析器。
显示自定义跟踪记录
在轨迹摘要中启用自定义轨道和自定义轨道组摘要，这些摘要可以使用 DevTools Extensibility API 进行自定义。
清除之前的录音
录制完成后，按清除录制内容
，从性能面板中清除该录制内容。
分析性能录制
在您记录运行时性能或记录加载性能后，Performance 面板会提供大量数据，用于分析刚刚发生的情况的性能。
为录制内容添加注释并分享
请参阅添加注释并分享效果发现。
获取富有实用价值的分析洞见
性能面板包含 Lighthouse 报告中也显示的性能数据分析。这些数据分析可以提供有关如何提升性能的建议，并针对以下性能问题（例如 LCP 和 INP 子部分、LCP 请求发现问题、第三方以及旧版和重复的 JavaScript 资源）提供引导式分析。如需查看完整列表，请参阅性能洞见文档。
如果未检测到任何问题，则洞见通过。数据分析标签页会在底部的已通过的数据分析收起部分中列出这些数据分析。未通过的分析洞见会列在各自的专用部分中。
如需利用数据分析，请执行以下操作：
- 进行性能录制。
- 在效果面板的左侧边栏中，打开数据洞见标签页，展开不同的部分，然后将光标悬停在各个项目上并点击。性能面板会突出显示轨迹中的相应事件。
浏览录制内容
为了帮助您浏览，当您将鼠标悬停在性能轨迹上时，性能面板会执行以下操作：
- 当您将鼠标悬停在时间轴概览上时，系统会显示一个跨越整个性能轨迹的垂直标记。
- 当您将鼠标悬停在主轨道中的项目上时，系统会在时间轴概览中突出显示相应范围。
如需仔细检查性能录制，您可以选择录制内容的一部分、滚动浏览长火焰图、放大和缩小，以及使用面包屑导航在缩放级别之间跳转。
使用键盘快捷键进行导航
如需使用键盘快捷键快速浏览录制内容，请先选择您偏好的键盘导航样式。
在面板的右上角，点击 显示快捷键，然后选择以下选项之一：
- 经典：使用鼠标滚轮（触控板向上或向下）进行缩放，使用 Shift + 鼠标滚轮进行垂直滚动。
- 现代：使用鼠标滚轮进行垂直滚动，使用 Shift + 鼠标滚轮进行水平滚动，使用 Command/Control + 鼠标滚轮进行缩放。
快捷键对话框还为您提供了可用快捷键的速查表。
选择录制内容的一部分
在性能面板的操作栏下方和记录顶部，您可以看到包含 CPU 和 NET 图表的时间轴概览部分。
如需选择录制内容的一部分，请点击并按住，然后在时间轴概览中向左或向右拖动。
如需使用键盘选择部分内容，请执行以下操作：
- 聚焦于主轨道或其任何相邻轨道。
- 使用 W、A、S、D 键可分别放大、向左移动、缩小和向右移动。
如需使用触控板选择一部分内容，请执行以下操作：
- 将鼠标悬停在时间轴概览部分或任何轨道（主及其相邻轨道）上。
- 使用两根手指向上滑动可缩小，向左滑动可向左移动，向下滑动可放大，向右滑动可向右移动。
创建面包屑导航并在缩放级别之间跳转
借助时间轴概览，您可以连续创建多个嵌套面包屑，提高缩放级别，然后在各个缩放级别之间自由切换。
如需创建和使用面包屑导航，请执行以下操作：
- 在时间轴概览中，选择录制内容的一部分。
- 将鼠标悬停在所选内容上，然后点击 N 毫秒 按钮。所选内容会展开以填充时间轴概览。时间轴概览顶部会开始构建面包屑导航链。
- 重复前两个步骤，创建另一个嵌套式面包屑。只要选择范围大于 5 毫秒，您就可以继续嵌套面包屑导航。
- 如需跳转到所选缩放级别，请点击时间轴概览顶部链中的相应面包屑导航。
如需移除面包屑导航的子级，请右键点击父级面包屑导航，然后选择移除子级面包屑导航。
滚动长火焰图
如需在主轨道或其任何相邻轨道中滚动较长的火焰图，请点击并按住，然后向任意方向拖动，直到找到所需内容。
忽略火焰图中的无关脚本
为了更好地专注于您的代码，您可以将不相关的脚本添加到忽略列表。
如需忽略脚本，请执行以下任一操作：
- 点击顶部操作栏中的 显示忽略列表设置对话框，然后在输入字段中输入正则表达式。火焰图将在您输入时应用新规则。
- 右键点击某个脚本，然后选择向忽略列表添加脚本。性能面板会将此脚本添加到 显示忽略列表设置对话框中的列表中。
该面板会自动收起此类脚本的过度嵌套，并将其标记为 On ignore list (REGULAR_EXPRESSION)。
在 显示忽略列表设置对话框中，您可以开启和关闭忽略列表规则。
如需从忽略列表中移除脚本，请在火焰图中右键点击该脚本，然后选择从忽略列表中移除脚本，或在 显示忽略列表设置对话框中将鼠标悬停在该脚本上，然后点击 移除。
开发者工具会将您在 设置 > 忽略列表中添加的忽略列表规则保存下来。
此外，如需仅关注第一方脚本，请勾选 使第三方变暗。效果面板会将第三方脚本灰显。
搜索活动
您可以搜索主轨道中的活动和网络轨道中的请求。
如需在性能面板底部打开搜索框，请按：
- macOS：Command+F
- Windows、Linux：Control+F
此示例显示了底部搜索框中的正则表达式，该表达式可查找以 E 开头的任何 activity。
如需循环浏览与您的查询匹配的活动，请执行以下操作：
- 点击 上一个或 下一个按钮。
- 按 Shift+Enter 可选择上一个，按 Enter 可选择下一个。
性能面板会在搜索框中选定的活动上显示提示。
如需修改查询设置，请执行以下操作：
- 点击 匹配大小写，使查询区分大小写。
- 点击 Regular expression（正则表达式），以便在查询中使用正则表达式。
如需隐藏搜索框，请点击取消。
更改轨道顺序并隐藏轨道
为了让性能跟踪记录更清晰，您可以在轨道配置模式下更改轨道的顺序并隐藏不相关的轨道。
如需移动和隐藏曲目，请执行以下操作：
- 如需进入配置模式，请右键点击轨道名称，然后选择配置轨道。
- 点击 向上或 向下，即可向上或向下移动曲目。点击 将其隐藏。
- 完成后，点击底部的完成轨道配置，退出配置模式。
观看视频，了解此工作流程的实际应用。
性能面板会保存新跟踪记录的轨道配置，但不会在下次开发者工具会话中保存。
查看主线程活动
使用 Main 轨道可查看页面主线程上发生的 activity。
点击某个事件，即可在摘要标签页中查看该事件的更多信息，包括但不限于：时长（和自身时长）、指向源脚本中相应行的链接、源网址（如果已知，则包含实体名称）、堆栈轨迹（如果有）以及饼图形式的时间细分。
Performance 面板会用蓝色勾勒出所选事件。
此示例在摘要标签页中显示了有关 get 函数调用事件的更多信息。
区分第一方事件和第三方事件
过度依赖第三方代码可能会对加载性能产生负面影响。借助性能面板，您可以直观地区分轨迹中的第一方事件和第三方事件，从而更明智地决定是减少还是推迟加载第三方代码，以优先渲染网页内容。
如需仅关注第一方代码的性能，请执行以下操作：
- 确保在性能轨迹或数据洞见标签页中未选择任何内容。为此，请点击轨迹中的空白区域。
- 在顶部操作栏中选中 使第三方变暗。Performance 面板会将性能跟踪记录中与第三方相关的事件灰显，仅突出显示第一方事件。
使用“第一方 / 第三方”表格突出显示事件
在时间轴概览中的选定范围内，如果未选择任何事件，摘要标签页会显示一个第一方 / 第三方表格，其中列出了以下各项的传输大小和主线程时间：
- 带有
1st party标记的第一方实体。 - 所选范围内检测到的所有第三方实体，未标记。
- 带有
Extension标记的扩展程序。 - 其他
[unattributed]实体。
如需查看在跟踪记录中突出显示的相关事件，并将其他事件灰显，请将鼠标悬停在表格中的实体上。如需让实体的事件保持突出显示，请在表格中选择该实体。如需移除突出显示，请点击轨迹中的任意空白区域。
如需在自下而上标签页中打开按此实体分组的活动，请将鼠标悬停在表中的实体上，然后点击其旁边的 自下而上。
解读火焰图
性能面板以火焰图的形式表示主线程活动。x 轴表示随时间变化的记录。y 轴表示调用堆栈。上方的事件会导致下方的事件。
此示例显示了主轨道中的火焰图。click 事件导致了匿名函数调用。此函数依次调用了 onEndpointClick_、handleClick_ 等。
性能面板会为脚本分配随机颜色，以分隔火焰图并使其更易于阅读。在前面的示例中，来自一个脚本的函数调用显示为浅蓝色。来自其他脚本的调用会显示为浅粉色。深黄色表示脚本活动，紫色事件表示渲染活动。这些深黄色和紫色事件在所有录制内容中都是一致的。
长任务也会突出显示，并以红色三角形表示，超过 50 毫秒的部分会以红色阴影表示：
在此示例中，任务耗时超过 400 毫秒，因此代表最后 350 毫秒的部分会用红色阴影表示，而最初的 50 毫秒则不会。
此外，主轨道还会显示使用 profile() 和 profileEnd() 控制台函数启动和停止的 CPU 性能分析器信息。在代码或控制台中调用 console.profileEnd() 会自动打开性能面板并显示记录的跟踪记录。
如需隐藏 JavaScript 调用的详细火焰图，请参阅停用 JavaScript 示例。停用 JS 采样后，您只会看到高级事件，例如 Event (click) 和 Function Call。
跟踪事件发起者
主轨道可以显示箭头，用于连接以下发起者及其引发的事件：
- 样式或布局失效 -> 重新计算样式或布局
- 请求动画帧 -> 已触发动画帧
- 请求空闲回调 -> 触发空闲回调
- 安装定时器 -> 定时器已触发
- 创建 WebSocket -> 发送…和接收 WebSocket 握手或销毁 WebSocket
- 安排 postTask -> 触发 postTask 或中止 postTask
如需查看箭头，请在火焰图表中找到发起者或其引发的事件，然后选择相应项。
选中此选项后，“摘要”标签页会显示发起者的发起者链接，以及他们引发的事件的由…发起链接。点击这些按钮即可在相应事件之间跳转。
在火焰图中隐藏函数及其子函数
如需清理主线程中的火焰图，您可以隐藏所选函数或其子函数：
在 Main 轨道中，右键点击某个函数，然后选择以下选项之一或按相应的快捷键：
- 隐藏功能 (
H) - 隐藏子项 (
C) - 隐藏重复的子项 (
R) - 重置子项 (
U) - 重置轨迹 (
T) - 向忽略列表添加脚本 (
I)
具有隐藏子级的函数名称旁边会显示 下拉按钮。
- 隐藏功能 (
如需查看隐藏的子项数量，请将鼠标悬停在 下拉按钮上。
如需重置具有隐藏子级的函数或整个火焰图，请选择该函数并按
U，或右键点击任意函数并选择重置跟踪记录。
忽略火焰图中的脚本
如需向忽略列表添加脚本，请右键点击图表中的脚本，然后选择向忽略列表添加脚本。
图表会收起被忽略的脚本，将其标记为在忽略列表中，并将其添加到 Settings > Ignore list（设置 > 忽略列表）中的自定义排除规则。被忽略的脚本会一直保存，直到您将其从跟踪记录或自定义排除规则中移除。
以表格形式查看活动
录制页面后，您无需仅依靠主轨道来分析活动。 开发者工具还提供了三个表格视图，用于分析 activity。每种视图都会从不同的角度显示活动：
您可以点击这三个表格（以及摘要标签页中的第一方 / 第三方表格）中任一表格内的某个项，以便在浏览性能跟踪记录时，让跟踪记录中的相应事件保持突出显示，并让其余事件变暗。
为了帮助您更快地找到所需内容，所有三个标签页的过滤栏旁边都有用于高级过滤的按钮：
- 匹配大小写。
- 正则表达式。
- 全字匹配。
效果面板中的每个表格视图都会显示函数调用等活动的链接。为了帮助您进行调试，开发者工具会在源文件中查找相应的函数声明。 此外，如果存在并启用了适当的源代码映射，开发者工具会自动查找原始文件。
点击链接可在来源面板中打开源文件。
根 activity
以下是对调用树标签页、自下而上标签页和事件日志部分中提到的根 activity 概念的说明。
根 activity 是指导致浏览器执行某些操作的 activity。例如，当您点击某个页面时，浏览器会触发一个 Event activity 作为根 activity。然后，该 Event 可能会导致处理程序执行。
在主轨道火焰图中，根 activity 位于图表的顶部。在调用树和事件日志标签页中，根 activity 是顶级项。
如需查看根 activity 的示例，请参阅“Call Tree”标签页。
“Call tree”标签页
使用调用树标签页可查看哪些根 activity 导致的工作量最大。
Call tree 标签页仅显示所选录制部分中的活动。如需了解如何选择部分内容，请参阅选择录制内容的一部分。
在此示例中，“Activity”列中的顶级项（例如 Event、Paint 和 Composite Layers）是根 activity。嵌套表示调用堆栈。在
此示例中，Event 导致了 Function Call， 导致了 button.addEventListener， 导致了 b，
依此类推。
自用时间表示直接花费在相应活动中的时间。总时间表示在该活动或其任何子活动中花费的时间。
点击自用时间、总时间或活动，即可按相应列对表格进行排序。
使用过滤条件框按活动名称过滤事件。
默认情况下，分组菜单设置为无分组。使用分组菜单可根据各种条件对活动表格进行排序。
“由下至上”标签页
使用自下而上标签页可查看哪些活动的累计耗时最长。
自下而上标签页仅显示录制内容中选定部分期间的活动。如需了解如何选择部分内容，请参阅选择录制内容的一部分。
在此示例的主轨迹火焰图中，您可以看到，几乎所有时间都花在执行对 wait() 的三次调用上。因此，自下而上标签页中的顶部 activity 为 wait。在火焰图中，对 wait 的调用下方的黄色部分实际上是数千个 Minor GC 调用。因此，您可以看到，在 Bottom-up 标签页中，下一个最耗费资源的是 Minor GC。
“自用时间”列表示相应 activity 的所有实例直接花费的累计时间。
总时间列表示在该活动或其任何子项中花费的汇总时间。
“执行用时最长的堆栈”表
在调用树或自下而上标签页的右侧，点击 显示最繁重的堆栈，以显示最繁重的堆栈表格。
此表显示所选活动的哪些子活动执行时间最长。将鼠标悬停在表格中的某个项目上，即可看到主要轨道中突出显示相应事件，其余部分变暗。
这样，您就可以在性能轨迹中直观地找到调用堆栈中耗时最多的嵌套 activity。
“事件日志”标签页
使用事件日志标签页可按活动在录制期间发生的顺序查看活动。
事件日志标签页仅显示录制内容中所选部分内的活动。如需了解如何选择部分内容，请参阅选择录音的一部分。
开始时间 列表示该 activity 相对于录制开始的时间点。在此示例中，所选项目的 1573.0 ms 开始时间表示 activity 在录制开始后 1573 毫秒开始。
自用时间列表示直接在该活动中花费的时间。
“总时间”列表示直接在该活动或其任何子活动中花费的时间。
点击开始时间、自用时间或总时间，即可按相应列对表格进行排序。
使用过滤条件框按名称过滤活动。
使用时长菜单可滤除用时不到 1 毫秒或 15 毫秒的所有活动。默认情况下，时长菜单设置为全部，这意味着会显示所有活动。
停用加载、脚本、渲染或绘制复选框，以滤除这些类别中的所有活动。
查看效果标记
在带有垂直线的叠加层中，您可以看到重要的性能标记，例如：
将鼠标悬停在轨迹底部的标记名称上，即可查看相应的时间戳。
查看自定义计时
在时间轨道上，查看自定义性能标记，例如：
performance.mark()次通话。下图显示了 813.44 毫秒处带有提示的单个标记，标记为开始运行 JavaScript。performance.measure()次通话。下方显示了一个黄色 span，标记为互动缓慢。
选择标记可在摘要标签页中查看更多详细信息，包括时间戳、总时间、自用时间和 detail 对象。对于 performance.mark() 和 performance.measure() 调用，该标签页还会显示堆栈轨迹。
查看互动
在互动轨道上查看用户互动，以找出潜在的响应速度问题。
如需查看互动，请执行以下操作：
在此示例中，Interactions 轨道显示了 Pointer 互动。交互具有须状线，用于指示处理时间边界处的输入延迟和呈现延迟。将鼠标悬停在互动上，即可看到一个提示，其中包含输入延迟时间、处理时间和呈现延迟时间。
互动轨道还会在摘要标签页和悬停提示中显示Interaction to Next Paint (INP) 警告，提示互动时长超过 200 毫秒：
互动轨道会在右上角用红色三角形标记超过 200 毫秒的互动。
查看布局偏移
在布局偏移轨迹上查看布局偏移。偏移量显示为紫色菱形，并根据其在时间轴上的邻近程度分组到聚类（紫色线条）中。
如需突出显示导致视口中发生布局偏移的元素，请将鼠标悬停在相应的菱形上。
如需查看摘要标签页中有关布局偏移或偏移的更多信息（包括时间、得分、元素和潜在原因），请点击相应的菱形或聚类。
如需了解详情，请参阅累积布局偏移 (CLS)。
查看动画
在动画轨道上查看动画。动画会以相应的 CSS 属性或元素（如有）命名，例如 transform 或 my-element。非合成动画会在右上角标记红色三角形。
选择动画，即可在摘要标签页中查看更多详细信息，包括合成失败的原因。
查看 GPU 活动
在 GPU 部分中查看 GPU 活动。
查看光栅活动记录
在 线程池 部分中查看光栅活动。
分析每秒帧数 (FPS)
开发者工具提供了多种分析每秒帧数的方法：
- 使用帧部分查看特定帧所用的时间。
- 使用 FPS 计量器可在页面运行时实时估算 FPS。请参阅使用 FPS 计数器实时查看每秒帧数。
“Frames”部分
Frames 部分会确切地告诉您特定帧所用的时间。
将鼠标悬停在某个帧上，即可查看包含有关该帧的更多信息的提示。
此示例显示了将鼠标悬停在某个帧上时显示的提示。
帧部分可以显示四种类型的帧：
- 空闲帧（白色）。无任何更改。
- 框架（绿色）。按预期及时渲染。
- 部分呈现的帧（黄色，带有稀疏的宽虚线图案）。Chrome 尽力及时呈现了至少一些视觉更新。例如，渲染程序进程的主线程工作（画布动画）延迟，但合成器线程（滚动）及时完成。
- 丢帧（红色，带有密集的实线图案）。Chrome 无法在合理的时间内渲染帧。
此示例展示了当您将鼠标悬停在部分呈现的帧上时显示的工具提示。
点击某个帧，即可在摘要标签页中查看有关该帧的更多信息。开发者工具会以蓝色突出显示所选框架。
查看网络请求
展开网络部分，即可查看性能录制期间发生的网络请求的瀑布流。
Network 轨道名称旁边有一个图例，其中包含用颜色编码的请求类型。
呈现阻塞请求会在右上角标记一个红色三角形。
将鼠标指针悬停在请求上，即可看到包含以下信息的提示：
- 请求的网址和执行该请求所用的总时间。
- 优先级或优先级变更，例如
Medium -> High。 - 请求是否为
Render-blocking。 - 请求时间细分，稍后会进行介绍。
当您点击某个请求时，Network 轨道会绘制一个从发起方指向该请求的箭头。
此外，Performance 面板会显示 Summary 标签页，其中包含有关请求的更多信息，包括但不限于 Initial Priority 和（最终）Priority 字段。如果它们的值不同，则表示请求的提取优先级在记录期间发生了变化。如需了解详情，请参阅使用 Fetch Priority API 优化资源加载。
Summary 标签页还会显示请求的时间安排明细。
在此示例中，对 www.google.com 的请求由左侧的线条 (|–)、中间的条形图（包含深色部分和浅色部分）以及右侧的线条 (–|) 表示。
如果存在，摘要标签页还会显示采用服务器端呈现技术的网络请求的服务器计时细分。对于这些请求，效果面板会从 Server-Timing 响应标头中获取数据。
您可以在网络标签页中找到其他时间细分数据。右键点击网络轨道中的请求或摘要标签页中的网址，然后点击在“网络”面板中显示。开发者工具会将您转到网络面板，并选择相应的请求。打开其时间标签页。
以下是这两种细分之间的对应关系：
- 左侧线条 (
|–) 表示截至第Connection start组事件（含）的所有事件。换句话说，就是Request Sent之前的所有内容。 - 条形图的浅色部分为
Request sent和Waiting for server response。 - 进度条的深色部分表示
Content download。 - 右侧的线 (
–|) 是等待主线程所花费的时间。Network > Timing 标签页不会显示该时间。
查看内存指标
选中内存复选框，即可查看上次录制的内存指标。
开发者工具会在摘要标签页上方显示一个新的内存图表。NET 图表下方还有一个名为 HEAP 的新图表。HEAP 图表提供的信息与 Memory 图表中的 JS Heap 线相同。
此示例显示了摘要标签页上方的内存指标。
图表中的彩色线条与图表上方的彩色复选框相对应。取消选中某个复选框可从图表中隐藏相应类别。
图表仅显示所选录音的区域。在前面的示例中，内存图表仅显示了录制开始时的内存用量，一直到大约 1000 毫秒标记处。
查看录音中某一部分的时长
在分析网络或主等部分时，您有时需要更精确地估算某些事件所用的时间。按住 Shift 键，点击并按住，然后向左或向右拖动，以选择录制内容的一部分。在所选内容的底部，开发者工具会显示该部分的耗时。
在此示例中，所选部分底部的 488.53ms 时间戳表示该部分所用的时间。
查看屏幕截图
如需了解如何启用屏幕截图，请参阅在录制时截取屏幕截图。
将鼠标悬停在时间轴概览上，即可查看录制期间该时刻的页面屏幕截图。时间轴概览部分包含 CPU、FPS 和 NET 图表。
您还可以点击画面部分中的某个画面来查看相应屏幕截图。DevTools 会在摘要标签页中显示屏幕截图的缩略图。
此示例展示了在 Frames 部分中点击 195.5ms 帧时，Summary 标签页中显示的屏幕截图。
点击摘要标签页中的缩略图，即可放大屏幕截图。
此示例显示了在摘要标签页中点击缩略图后显示的放大版屏幕截图。
查看图层信息
如需查看有关帧的高级层信息，请执行以下操作：
- 启用高级绘制插桩。
- 在帧部分中选择一个帧。DevTools 会在新的层标签页（位于事件日志标签页旁边）中显示有关其层的信息。
将鼠标悬停在某个层上，即可在图表中突出显示该层。
此示例展示了当您将鼠标悬停在图层 #39 上时，该图层会突出显示。
如需移动图表，请执行以下操作：
- 点击平移模式
即可沿 X 轴和 Y 轴移动。 - 点击 Rotate Mode（旋转模式）图标
可沿 Z 轴旋转。 - 点击重置转换
，将图表重置为原始位置。
查看层级分析的实际应用：
查看绘制性能分析器
如需查看有关绘制事件的高级信息，请执行以下操作：
- 启用高级绘制检测。
- 在主轨道中选择一个绘制事件。
使用“渲染”标签页分析渲染性能
使用渲染标签页的功能可直观了解网页的渲染性能。
使用 FPS 计数器实时查看每秒帧数
帧渲染统计信息是一个叠加层，会显示在视口的右上角。它会在网页运行时实时估算 FPS。
请参阅帧渲染统计信息。
使用“绘制闪烁”功能实时查看绘制事件
使用绘制闪烁功能可实时查看网页上的所有绘制事件。
请参阅绘制闪烁。
使用“图层边框”查看图层的叠加效果
使用图层边框在网页顶部查看图层边框和图块的叠加层。
请参阅图层边框。
实时发现滚动性能问题
使用滚动性能问题可识别页面中具有与滚动相关的事件监听器的元素，这些元素可能会影响页面性能。开发者工具会以青色突出显示可能存在问题的元素。
请参阅滚动性能问题。