使用 性能 工具分析网站的性能。 有两个main视图：
- 与当前网页交互时，主页会显示本地指标。
- 记录配置文件并查看性能时间线。
详细内容：
使用这些工具提高性能 -->
有关使用 性能 工具提高网站性能的演练，请参阅 分析运行时性能 (教程) 。
概述
性能工具显示页面交互的本地指标，并允许记录 Web 应用程序的 CPU 性能配置文件。 分析配置文件，找到潜在的性能瓶颈以及优化资源使用的方法。
打开性能工具
若要打开 性能 工具，请执行以下作：
在新窗口或选项卡中转到网页，例如 探索宇宙 演示。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
在顶部 的活动栏中 ，单击
“性能 工具”。如果“
“性能工具”未显示在活动栏中，请单击“更多工具” (
) 按钮，然后选择“性能”工具。
使用命令菜单
若要使用命令菜单打开性能工具，请执行以下作：
在新窗口或选项卡中转到网页，例如 探索宇宙 演示。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
在 DevTools 的右上角，单击“ 自定义并控制 DevTools”，然后单击“ 运行命令”。
或者，按：
- macOS： Command+Shift+P
- Windows、Linux、ChromeOS： Control+Shift+P
命令 菜单 随即打开，并读取 “运行 >命令”。
开始键入 性能，选择“ 显示性能[面板]”，然后按 Enter。
页面交互的本地指标
使用 性能 工具在初始的“本地指标”视图中查看核心 Web Vitals 指标 。 性能工具的主页显示本地指标，这是有关呈现网页的性能指标：
- 最大内容绘制 (LCP) - 加载页面main内容的速度。
- 累积布局移位 (CLS) - 衡量最近意外页面布局转移的度量值。
- 与下一个绘图 (INP) 的交互 - 页面上最近用户交互的响应能力。
最初打开 性能 工具时，“本地指标”部分中的三张卡片中会显示 Core Web Vitals 指标 ：
录制的配置文件时间线
此外，使用 性能 工具查看记录的性能跟踪，包括：
- 记录性能配置文件。
- 更改捕获设置。
- 分析性能报告。 显示有关记录发生一段时间内页面性能的信息，例如：
- 录制期间发生的用户交互。
- 运行的 JavaScript 代码。
- 发生的样式设置和布局作。
- 一段时间内的其他性能指标，例如网络请求和布局变化。
记录性能跟踪后，将显示性能跟踪，而不是 本地指标。
切换到查看本地指标或其他配置文件
若要切换到显示初始本地指标视图，请单击实时指标页返回 (
) 按钮。
若要切换到显示其他打开的已记录配置文件时间线，请单击实时指标页面返回右侧的“显示最近的时间线会话”下拉列表， () 按钮。
监视核心 Web Vitals 指标
使用 性能 工具在初始的“本地指标”视图中查看核心 Web Vitals 指标 。 性能工具的主页显示本地指标，这些指标是有关呈现网页的性能指标：
- 最大的内容绘制 (LCP) - 加载页面main内容的速度。
- 累积布局移位 (CLS) - 最近意外页面布局转移的度量值。
- 与下一个绘图 (INP) 的交互 - 页面上最近用户交互的响应能力。
术语
| 术语 | 描述 | Docs |
|---|---|---|
| Web Vitals | 一大组指标为在 Web 上提供出色的用户体验提供了统一指导。 | Web Vitals |
| 核心 Web Vitals | 应用于所有网页的 Web Vitals 子集，应由所有网站所有者衡量。 每个核心 Web Vitals 都代表用户体验的一个不同方面，在现场可衡量，并反映了以用户为中心的关键结果的实际体验。 | Web Vitals 中的核心 Web Vitals |
| 最大内容绘制 (LCP) | 度量 加载 性能。 为了提供良好的用户体验，LCP 应在页面首次开始加载后的 2.5 秒内发生。 相对于用户首次导航到页面的时间，视区中可见的最大图像、文本块或视频的呈现时间。 | 最大的内容绘制 (LCP) ， 优化 LCP |
| 累积布局迁移 (CLS) | 测量 视觉稳定性。 为了提供良好的用户体验，页面应保持 0.1 的 CLS。 或更少。 在整个页面生命周期内发生的每个意外布局转换中，布局移动的最大突发分数。 | (CLS) 累积布局移位 ， 优化 CLS |
| 与下一个绘图 (INP) 交互 | 测量 交互性。 为了提供良好的用户体验，页面的 INP 应小于 200 毫秒。 页面对用户交互的总体响应能力，具体取决于在用户访问页面的整个生命周期内发生的所有单击、点击和键盘交互的延迟。 | 与下一个绘图 (INP) 交互 ， 优化 INP |
| 本地指标、本地数据 | LCP、CLS 和 INP 指标。 它们在检查的网页上本地捕获，并在与页面交互时更新。 |
使用演示页
若要在性能工具中对 LCP、CLS 和 INP 卡生成差或需要改进指标，请执行以下作：
在新窗口或选项卡中打开网页，例如 探索宇宙 演示。
探索宇宙演示页旨在有意缓慢加载和处理交互，以说明如何在性能工具中使用 LCP、CLS 和 INP 指标来识别和修复性能问题。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
在顶部 的活动栏中 ，选择
“性能 工具”。如果“
“性能工具”未显示在活动栏中，请单击“更多工具” () 按钮，然后选择“性能”工具。最大化窗口，并使演示页窗格变得宽，例如窗口宽度的 60%。
如果演示页面窗格太窄，某些卡片可能会继续显示 良好，值为绿色，这不是预期的结果。
选择“后续步骤”窗格>“环境设置”>卡 CPU 限制下拉列表>中选择“4 倍减速 - 建议”。
或者，选择“ 捕获设置” (
) >CPU 限制 下拉列表 >4 倍减速 - 建议。选择“后续步骤”窗格>“环境设置”卡>“网络限制”下拉列表中选择>“慢速 4G”。
选择“后续步骤”窗格“>环境设置”>卡选中“禁用网络缓存”复选框。
右键单击 (或长按“) 地址栏左侧的”刷新“按钮，然后选择”清空缓存和硬刷新”。
这可确保再次从服务器加载映像，而不是从本地缓存加载。
LCP 和 CLS 卡显示橙色值，需要改进，或者红色值和差值，而不是绿色值和良好。
如果 LCP 或 CLS 卡在银河图像完成渲染后保持绿色且显示良好，请最大化窗口并使演示页面窗格更宽。
LCP 卡显示银河图像需要很长时间才能加载。 卡显示橙色值，需要改进，或者红色值和差值，而不是绿色值和良好。 引擎将此图像标识为要呈现的最大项。
在 LCP 卡，将鼠标悬停在指标值上以查看工具提示中的信息。
CLS 卡说明了布局中的突然意外跳跃可能会对用户产生负面影响。 这也是由于映像需要一些时间来加载。 根据设计，演示网页忽略了为图像指定高度，因此页面最初加载时不会为图像保留大量空间。 当图像开始出现时，它下面的内容突然跳下来。
在 CLS 卡，将鼠标悬停在指标值上以查看工具提示中的信息。
银河图像完成呈现后，在呈现的演示页中，单击右侧 “发现 ”列中的标题之一，例如 Heliocentric Theory (1543) 。
INP 卡从不显示值更改为显示橙色值并需要改进，或者显示红色值和差值。 将显示 INP 值。
在 INP 卡，将鼠标悬停在指标值上以查看工具提示中的信息。
在 INP 卡中，单击 INP 值。
在演示页中，“发现”卡片旨在缓慢地展开和重新呈现，因此在单击标题和呈现展开的卡内容之间需要很长时间。 延迟是介于 100 毫秒和 1000 毫秒之间的随机值，导致 INP 值较高。
“ 本地指标 ”卡下方填充了“ 交互 ”选项卡和 “布局班次 ”选项卡。
“交互”选项卡
“ 交互 ”选项卡显示有关与网页交互的信息：
“ 交互” 选项卡包括：
- 阶段。
- 元素。
- 计时。
若要清除“交互”选项卡，请单击“交互”选项卡右侧的“清除当前日志 (
) 按钮。
“布局移位”选项卡
“ 布局移位 ”选项卡显示有关布局排位的信息：
“ 布局移位 ”选项卡包括：
- 分数。
- 元素。
捕获和分析性能报告
在下一部分中，请遵循有关如何记录配置文件、更改捕获设置和分析报表的指南。
记录性能配置文件
准备好录制时， 性能 工具会提供以下选项：
- 在性能功能参考中记录运行时性能。
- 性能功能参考中的记录加载性能。
- 在性能功能参考中录制时捕获屏幕截图。
- 在性能功能参考中录制时强制垃圾回收。
- 在性能功能参考中保存和共享录制内容。
- 在性能功能参考中加载录制。
- 清除性能功能参考中的上一个记录。
更改捕获设置
通过捕获设置 ，可以更改 DevTools 捕获性能记录的方式，并且可以在报告中提供其他信息。 单击“ 捕获设置” (
) 按钮，以访问 “捕获设置 ”菜单。
从“ 捕获设置 ”菜单中选择以下选项：
选中 “禁用 JavaScript 示例 ”复选框：禁用录制过程中调用的主轨道中显示的 JavaScript 调用堆栈的录制。 降低性能开销。 请参阅性能功能参考中的禁用 JavaScript 示例。
选中“ 启用高级渲染检测 (慢) ”复选框：捕获高级绘制检测。 严重阻碍性能。 请参阅性能功能参考中的启用高级绘制检测。
选中“ (慢速) 启用 CSS 选择器统计信息 ”复选框：捕获 CSS 选择器统计信息。 严重阻碍性能。 请参阅 DevTools (Microsoft Edge 131) 中的新增功能中的“查看 CSS 选择器成本”。
CPU 限制：模拟较慢的 CPU 速度。 请参阅性能功能参考中的录制时限制 CPU。
网络限制：模拟较慢的网络速度。 请参阅性能功能参考中的录制时限制网络。
分析性能报告
有关如何使用性能工具的完整指南，请参阅性能功能参考中的分析性能记录。
导航性能报告：
若要专注于对工作流至关重要的内容，
在性能功能参考中放大录制部分并在缩放级别之间切换。
若要了解 “自下而上”、“ 调用树”和“ 事件日志 ”选项卡，请执行以下作：
- 在性能功能参考中查看表中的活动。
分析性能报告：
- 在性能功能参考中查看main线程活动。
- 阅读性能特征参考中的火焰图。
- 查看性能功能参考中的屏幕截图。
- 在性能功能参考中查看内存指标。
- 在性能功能参考中查看录制的一部分的持续时间。
- 在重新计算样式事件期间分析 CSS 选择器性能。
- 分析性能特征参考中的每秒帧数 (FPS) 。
- 性能记录事件参考
使用这些工具提高性能
发现可以帮助你提高网站性能的其他工具：
| 工具 | 文章 |
|---|---|
| Lighthouse 工具 | 使用 Lighthouse 优化网站速度 |
| 内存 工具 | 修复内存问题 |
| “性能 工具 >见解 ”选项卡 | 在性能功能参考中获取可作的见解。 |
| 呈现 工具 | 呈现工具，用于查看具有不同显示选项或视觉缺陷的网页的外观 |
| 问题 工具 | 使用“问题”工具查找和修复问题 |
| 性能 工具 | 在性能特征参考中查看层信息 |
注意
此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在这里 找到，由戴尔圣马特和索非亚埃梅利亚诺娃创作。
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。