性能工具：分析网站的性能

使用 性能 工具分析网站的性能。 有两个主要视图：

• 当你与当前网页交互时，主页会显示本地指标。
• 记录个人资料并查看性能时间线。

详细内容：

• 概述
  • 打开性能工具
    • 使用命令菜单
  • 页面交互的本地指标
  • 录制的配置文件时间线
  • 切换到查看本地指标或其他配置文件
• 监视核心 Web Vitals 指标
  • 术语
  • 使用演示页面
  • “交互”选项卡
  • “布局排班”选项卡
• 记录和分析性能报告
  • 记录性能配置文件
  • 更改捕获设置
  • 分析性能报告
• 使用这些工具提高性能

有关使用 性能 工具提高网站性能的演练，请参阅分析 运行时性能 (教程) 。

概述

性能工具显示页面交互的本地指标，并允许您记录 Web 应用程序的 CPU 性能配置文件。 分析配置文件以发现潜在的性能瓶颈以及优化资源使用的方法。

打开性能工具

若要打开 性能 工具：

1. 在新窗口或选项卡中转到网页，例如 探索宇宙 演示。

2. 右键单击该网页，然后选择 “检查”。

   DevTools 随即打开。

3. 在顶部的 “活动栏 ”中，单击“ “性能工具 ”。

   如果“活动栏”中未显示““工具，请单击”更多工具“ (”) 按钮，然后选择”性能“工具。

使用命令菜单

使用命令菜单打开性能工具：

1. 在新窗口或选项卡中转到网页，例如 探索宇宙 演示。

2. 右键单击该网页，然后选择 “检查”。

   DevTools 随即打开。

3. 在 DevTools 的右上角，单击 “自定义和控制 DevTools”，单击“ 运行命令”。

   或者，按：

   • macOS： Command+Shift+P
   • Windows、Linux、ChromeOS：Control+Shift+P

   命令 菜单 随即打开，并显示“ 运行 >命令”。

4. 开始键入 “性能”，选择“ 显示性能 [面板]”，然后按 Enter。

   

页面交互的本地指标

使用 “性能 ”工具在初始本地指标视图中查看 Core Web Vitals 指标。 性能工具的主页显示本地指标，即有关呈现的网页的性能指标：

• Largest contentful paint (LCP) - 页面的主要内容加载的速度。
• 累积布局偏移 (CLS) - 最近一次意外页面布局偏移的度量。
• 与下一个画图的交互 (INP) - 页面上最近一次用户交互的响应速度。

最初打开 “性能 ”工具时，Core Web Vitals 指标显示在 “本地指标” 部分的三张卡片中：

录制的配置文件时间线

还可以使用 “性能 ”工具查看记录的性能跟踪，包括：

• 记录性能配置文件。
• 更改捕获设置。
• 分析性能报告。 显示有关记录发生的时间段内页面性能的信息，例如：
  • 录制期间发生的用户交互。
  • 运行的 JavaScript 代码。
  • 发生的样式设置和布局操作。
  • 一段时间内的其他性能指标，例如网络请求和布局偏移。

记录性能跟踪后，将显示性能跟踪，而不是 本地指标。

切换到查看本地指标或其他配置文件

若要切换到显示初始本地指标视图，请单击“返回到实时指标页面” (“) 按钮。

要切换为显示其他打开的已录制档案时间线，请单击“显示最近的时间线会话”下拉列表，该下拉列表位于实时指标页面返回右侧 (“) 按钮。

监视核心 Web Vitals 指标

使用 “性能 ”工具在初始本地指标视图中查看 Core Web Vitals 指标。 性能工具的主页显示本地指标，这些指标是有关呈现的网页的性能指标：

• Largest Contentful Paint (LCP) - 页面主要内容的加载速度。
• 累积布局偏移 (CLS) - 最近一次意外页面布局偏移的度量。
• 与下一个画图的交互 (INP) - 页面上最近一次用户交互的响应速度。

术语

术语	描述	Docs
Web Vitals	一组大型指标提供统一指导，以在 Web 上提供出色的用户体验。	Web Vitals 在 web.dev。
Core Web Vitals	适用于所有网页的 Web Vitals 子集，并且应由所有网站所有者衡量。 每个核心 Web 生命代表用户体验的一个独特方面，可在现场衡量，并反映以用户为中心的关键结果的真实体验。	Core Web Vitals in Web Vitals at web.dev.
LCP) 最大的内容绘图 (	测量 加载 性能。 为了提供良好的用户体验，LCP 应在页面首次开始加载后的 2.5 秒内发生。 视区中可见的最大图像、文本块或视频相对于用户首次导航到页面时的呈现时间。	MDN 术语表中内容最大的绘图 (LCP) 。 MDN 的 LargestContentfulPaint。
累积布局偏移 (CLS)	测量 视觉稳定性。 为了提供良好的用户体验，页面应保持 0.1 的 CLS。 或更少。 页面整个生命周期中发生的每个意外版式偏移的最大版式偏移分数突发。	累积布局偏移 ( MDN 术语表中的 CLS) 。 MDN 的 LayoutShift。
与 INP) (下一个绘制的交互	测量 交互性。 为了提供良好的用户体验，页面的 INP 应为 200 毫秒或更短。 页面对用户交互的整体响应能力，基于用户访问页面的整个生命周期中发生的所有单击、点击和键盘交互的延迟。	与 MDN 术语表中的 INP) (下一个绘图的交互。 MDN 的 PerformanceEventTiming。
本地指标、本地数据	LCP、CLS 和 INP 指标。 它们在被检查的网页上本地捕获，并随着你与页面交互而更新。

使用演示页面

若要在“性能”工具中的 LCP、CLS 和 INP 卡上生成较差或需要改进的指标：

1. 在新窗口或选项卡中打开网页，例如 探索宇宙 演示。

   “探索宇宙”演示页面旨在故意缓慢加载和处理交互，以说明如何在 性能 工具中使用 LCP、CLS 和 INP 指标来识别和修复性能问题。

2. 右键单击网页，然后选择 “检查”。

   DevTools 随即打开。

3. 在顶部的 “活动栏 ”中，选择“ “性能工具 ”。

   如果“活动栏”中未显示““工具，请单击”更多工具“ (”) 按钮，然后选择”性能“工具。

4. 最大化窗口，并使演示页面窗格变宽，例如窗口宽度的 60%。

   如果演示页面窗格太窄，某些卡片可能会继续显示 良好，但绿色值不是预期的结果。

5. 选择 后续步骤窗格 >环境设置 卡 >CPU 限制下拉列表 > 选择 4 倍减速 - 推荐。

   或者，选择记录设置 (CPU 限制下拉菜单 >) > 4 倍减速 - 推荐。

6. 选择 后续步骤窗格 >环境设置 卡 >网络限制 下拉列表 > 选择 慢速 4G。

7. 选择“后续步骤”窗格环境>设置卡>，选中“禁用网络缓存”复选框。

   

8. 右键单击 (或长按) 地址栏左侧的“刷新”按钮，然后选择“空缓存和硬性刷新”。

   这可确保再次从服务器而不是从本地缓存加载映像。

   LCP 和 CLS 卡显示橙色值和需要改进，或红色值和差，而不是绿色值和良好。

9. 如果 LCP 或 CLS 卡在星系图像渲染完成后保持绿色并显示良好，请最大化窗口并加宽演示页面窗格。

   LCP 卡显示星系图像加载时间较长。 该卡显示橙色值且需要改进，或红色值且较差，而不是绿色值和良好。 引擎将此图像标识为要渲染的最大项。

10. 在 LCP 卡中，将鼠标悬停在指标值上以查看工具提示中的信息。

    CLS 卡说明布局中的突然、意外跳转可能会对用户产生负面影响。 这也是因为加载映像需要一些时间。 根据设计，演示网页忽略了为图像指定高度，因此页面最初加载时不会为图像保留太多空间。 当图像开始出现时，其下方的内容会突然向下跳动。

11. 在 CLS 卡中，将鼠标悬停在指标值上以查看工具提示中的信息。

12. 星系图像渲染完成后，在渲染的演示页面中，单击右侧“ 发现” 列中的标题之一，例如 Heliocentric Theory (1543) 。

    INP 卡从不显示值更改为显示橙色值且需要改进，或显示红色值且较差。 将显示 INP 值。

13. 在 INP 卡中，将鼠标悬停在指标值上以查看工具提示中的信息。

14. 在 INP 卡中，单击 INP 值。

    在演示页面中，发现卡被设计为缓慢扩展和重新渲染，因此在单击标题和渲染扩展的卡内容之间需要很长时间。 延迟是介于 100ms 和 1000ms 之间的一个随机值，导致较高的 INP 值。

    在 “本地指标 ”卡片下方，填充了 “交互 ”选项卡和“ 布局排班” 选项卡。

“交互”选项卡

“ 交互” 选项卡显示有关你与网页交互的信息：

“ 交互” 选项卡包括：

• 阶段。
• 元素。
• 计时。

要清除“交互”选项卡，请单击“交互”选项卡右侧的清除当前日志 (清除) 按钮。

“布局排班”选项卡

“ 布局移位 ”选项卡显示有关布局移位的信息：

“ 布局排班” 选项卡包括：

• 分数。
• 元素。

记录和分析性能报告

在接下来的部分中，按照有关如何记录配置文件、更改捕获设置和分析报告的指南进行操作。

记录性能配置文件

准备好录制时， 性能 工具会提供以下选项：

• 在性能功能参考中记录运行时性能。
• 性能功能参考中记录加载性能。
• 在“性能功能参考”中录制时记录屏幕截图。
• 在“性能功能参考”中录制时强制收集垃圾。
• 在“性能功能参考”中保存并共享录制内容。
• 在“性能功能参考”中加载录制。
• 清除“性能功能参考”中的上一记录。

更改捕获设置

通过记录设置，可以更改 DevTools 捕获性能记录的方式，并可以在报告中提供其他信息。 单击“记录设置” (““按钮访问记录设置菜单。

从“记录设置”菜单中选择以下选项：

• 选中“ 禁用 JavaScript 示例 ”复选框： 禁用录制期间调用的主轨道中显示的 JavaScript 调用堆栈的录制。 减少性能开销。 请参阅性能功能参考中的禁用 JavaScript 示例。

• 选择“ 启用高级渲染检测 (慢速) ”复选框： 捕获高级绘制检测。 严重影响性能。 请参阅性能功能参考中的启用高级画图检测工具。

• 选中“ 启用 CSS 选择器统计信息 (慢) ”复选框：捕获 CSS 选择器统计信息。 严重影响性能。 请参阅 DevTools 中的新增功能 (Microsoft Edge 131) 中“性能工具”侧边栏中的“查看 CSS 选择器成本”。

• CPU 限制：模拟较慢的 CPU 速度。 请参阅性能功能参考中的录制时限制 CPU。

• 网络限制： 模拟较慢的网络速度。 请参阅性能功能参考中的在录制时限制网络。

分析性能报告

有关如何使用性能工具的完整指南，请参阅性能功能参考中的分析性能记录。

导航性能报告：

• 请参阅在性能功能参考中导航录制。

• 请参阅性能功能参考中的搜索活动。

• 请参阅性能功能参考中的跟踪事件发起程序。

专注于对工作流重要的事情：

• 更改曲目的顺序并将其隐藏

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

• 在“性能功能参考”中放大部分录制内容并在缩放级别之间切换。

若要了解“ 自底向上”、“ 调用树”和 “事件日志 ”选项卡，请执行以下操作：

• 在“性能功能参考”中查看表中的活动。

分析性能报告：

• 在性能功能参考中查看主线程活动。
• 阅读性能功能参考中的火焰图。
• 查看性能功能参考中的屏幕截图。
• 在性能功能参考中查看内存指标。
• 在“性能功能参考”中查看部分录制的持续时间。
• 分析重新计算样式事件期间的 CSS 选择器性能。
• 分析每秒帧数 (FPS) 在性能 功能参考中。
• 性能录制事件参考

使用这些工具提高性能

发现其他可以帮助您提高网站性能的工具：

工具	文章
Lighthouse 工具	使用 Lighthouse 优化网站速度
内存 工具	修复内存问题
性能 工具 >“见解 ”选项卡	在性能功能参考中获取可操作的见解。
呈现 工具	呈现工具，用于查看具有不同显示选项或视觉缺陷的网页的外观
问题 工具	使用问题工具查找和修复问题
性能 工具	在性能要素参考中查看图层信息

另请参阅

• 探索宇宙 演示页面

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面可在 此处 找到，作者为 Dale St. Marthe 和 Sofia Emelianova。

本作品根据 Creative Commons Attribution 4.0 International License 获得许可。