使用性能分析面板，根据应用场景获取有关网站性能的富有实用价值的分析洞见。
概览
借助性能数据分析面板，您可以执行以下操作：
- 记录和衡量网页加载性能。
- 查看 Web Vitals 性能指标。
- 查看网络活动。
- 模拟较慢的 CPU 和网络速度。
- 导入和导出录音。
为什么要推出新版面板？
新推出的性能数据分析面板是一项实验性功能，旨在解决开发者在使用现有性能面板时遇到的以下 3 个痛点：
- 信息量过多。经过重新设计的界面中，效果分析面板会简化数据，并仅显示相关信息。
- 难以区分使用情形。性能数据分析面板支持以用例为导向的分析。目前，该指标仅支持网页加载用例，未来我们会根据您的反馈添加更多指标，例如互动度。
- 需要深入了解浏览器的运作方式才能有效使用。效果数据分析面板会在数据分析窗格中突出显示关键数据分析，并提供有关如何解决问题的实用反馈。
简介
本教程将介绍如何使用性能分析面板衡量和了解网页加载性能。继续阅读或观看上方视频版教程。
打开“性能数据分析”面板
记录性能
性能数据分析面板可以记录常规性能和基于用例的性能（例如网页加载）。
- 在新标签页中打开此演示页面，然后在该页面上打开“效果分析”面板。
您可以在录制时节流网络和 CPU。对于本教程，请选中停用缓存，并在下拉菜单中将 CPU 设置为速度降低 4 倍：
点击 衡量网页加载情况。在网页重新加载期间，DevTools 会记录性能指标，然后在网页加载完成几秒钟后自动停止记录。
重放表演录制内容
使用底部的控件控制录制的重放。
以下示例展示了如何执行此操作。
- 点击 Play 播放录音。
- 点击 Pause 可暂停重放。
- 使用下拉菜单调整播放速度。
- 点击 切换视觉预览，以显示或隐藏视觉预览。
浏览表演录制
开发者工具会自动缩小，以显示完整的录制时间轴。您可以通过缩放和移动时间轴来浏览录音。
如需缩放时间轴并向左或向右移动，请使用相应的导航按钮：
- 点击时间轴可移动播放头，以查看特定帧。
- 点击底部的 放大和 缩小控件即可缩放。在本例中，您可以根据播放头进行缩放。
- 拖动底部的水平滚动条可左右移动时间轴。
或者，您也可以使用键盘快捷键。点击 按钮查看快捷键。
使用快捷键时，您可以根据鼠标光标进行缩放。
查看性能数据分析
在数据分析窗格中获取性能数据分析列表。发现并解决潜在的性能问题。
将鼠标悬停在每个数据洞见上，即可在主轨道上突出显示它们。
点击某条数据洞见（例如“呈现阻塞请求”），即可在详细信息窗格中打开该数据洞见。如需进一步了解问题，请查看其文件、问题、解决方法等部分。
查看 Web Vitals 性能指标
网页指标是 Google 推出的一项计划，旨在就哪些质量信号对提供出色的网站用户体验至关重要提供统一指南。
您可以在时间轴和数据分析窗格中查看这些指标。
将鼠标悬停在时间轴上的数据洞见上，即可详细了解相关指标。
了解 Largest Contentful Paint 延迟情况
Largest Contentful Paint (LCP) 是 Core Web Vitals 指标之一。该指标会报告视口内可见的最大图片或文本块的渲染时间（相对于网页的首次加载时间）。
良好的 LCP 得分为 2.5 秒或更短。
如果网页上的最大内容渲染所需的渲染时间较长，您会在时间轴中看到带有黄色方块或红色三角形的 LCP 标记。
如需打开详细信息窗格，请点击时间轴或右侧数据分析窗格中的 LCP 标记。在该窗格中，您可以了解延迟的可能原因以及有关如何解决延迟问题的建议。
在此示例中，请求会阻止渲染，您可以内嵌应用关键样式来解决此问题。如需了解详情，请参阅移除阻塞渲染的资源。
如需查看 LCP 呈现时间的各个子部分，请向下滚动到详细信息 > 时间细分部分。
LCP 呈现时间由以下子部分组成：
| LCP 子部分 | 说明 |
|---|---|
| 首字节时间 (TTFB) | 从用户发起网页加载到浏览器收到 HTML 文档响应的第一个字节所用的时间。 |
| 资源加载延迟 | TTFB 与浏览器开始加载 LCP 资源之间的差值。 |
| 资源加载时间 | 加载 LCP 资源本身所需的时间。 |
| 元素渲染延迟 | LCP 资源完成加载到 LCP 元素完全呈现之间的时间差。 |
如果 LCP 元素不需要资源加载即可呈现，则会省略资源加载延迟时间。例如，如果元素是使用系统字体渲染的文本节点。
查看布局偏移活动
在布局偏移轨道中查看布局偏移活动。
布局偏移会按会话时段进行分组。在此示例中，有两个会话窗口。会话窗口之间存在间隔。
Cumulative Layout Shifts (CLS) 是 Core Web Vitals 指标之一。使用布局偏移轨道可找出布局偏移的潜在问题和原因。
在改进 CLS 指标时，请始终从最长的会话时间范围开始。在我们的示例中，会话窗口 1 是根据背景颜色和级别确定的最大窗口。
点击屏幕截图可查看布局偏移的详细信息，确定潜在根本原因和受影响的元素。
在我们的示例中，可能的根本原因是未调整大小的媒体。如需了解如何解决此问题，请参阅优化累积布局偏移。
了解布局偏移分数
如需了解得分计算方式，请使用详细信息窗格中的时间范围部分。Window 会显示当前布局偏移属于哪个会话时段。
如果整个网页发生偏移，则每个布局偏移的最高分数为 1。在我们的示例中，第一个布局偏移得分为 0.15。第二次布局偏移得分为 0.041。
此会话时段的总得分为 0.19。根据 CLS 阈值，该网页需要改进。会话窗口的背景颜色也会随之改变。
会话窗口背景图表会随时间推移而增加。布局偏移的累计得分反映了相应时间点的增加幅度。
查看网络活动
在网络轨道中查看网络活动。您可以展开网络轨迹以查看所有网络活动，并点击各个项目以查看详细信息。
查看渲染程序活动
在 Renderer 轨道中查看渲染活动。您可以展开每个渲染程序来查看活动，并点击每个项目来查看详细信息。
查看 GPU 活动
在 GPU 轨道中查看 GPU 活动。GPU 轨道默认处于隐藏状态。如需启用此功能，请在设置中选中 GPU。
查看用户计时
如需获取自定义性能衡量指标，您可以使用用户用时，并使用用时轨道直观呈现用时。如需了解详情，请参阅 User Timing API。
请查看此演示页面，了解如何计算文本加载所用的时间。
如需查看用户计时，请执行以下操作：
- 使用
performance.mark()在应用中标记地点。 - 使用
performance.measure()测量标记之间的经过时间。 - 记录效果。
- 在时间轨道上查看测量结果。如果您看不到轨道，请在设置中查看用户时间。
- 如需查看详细信息，请点击轨道上的时间。
自定义界面
如需自定义时间轴和轨道，请点击面板的 Settings（设置）图标，然后选中您偏好的选项。
导出录制内容
如需保存录音，请点击导出图标 。
导入录音
如需加载录音，请选择导入图标 。
删除录音
如需删除录音，请执行以下操作：
- 点击 删除。 系统随即会打开一个确认对话框。
- 在对话框中，点击删除以确认删除。