运行时性能是指网页在运行时（而不是加载）时的性能。本教程介绍如何使用 Chrome 开发者工具的性能面板来分析运行时性能。就 RAIL 模型而言，您在本教程中学到的技能对于分析页面的响应阶段、动画阶段和闲置阶段非常有用。
开始使用
在本教程中，您将在实际页面上打开开发者工具，并使用“性能”面板查找页面上的性能瓶颈。
- 在无痕模式下打开 Google Chrome。无痕模式可确保 Chrome 以干净的状态运行。例如，如果您安装了大量扩展程序，这些扩展程序可能会对性能测量结果造成干扰。
在无痕式窗口中加载以下网页。这是您要分析的演示。 页面上会显示一些蓝色小方块，这些方块上下移动。
https://googlechrome.github.io/devtools-samples/jank/按 Command+Option+I (Mac) 或 Control+Shift+I（Windows、Linux）以打开开发者工具。
图 1. 左侧的演示和右侧的开发者工具
模拟移动设备 CPU
与台式机和笔记本电脑相比，移动设备的 CPU 性能低得多。每次分析网页时，请使用 CPU 节流来模拟网页在移动设备上的性能。
- 在开发者工具中，点击性能标签页。
- 确保已选中屏幕截图复选框。
- 点击 Capture Settings 图标
。
开发者工具会显示与如何捕获性能指标相关的设置。 对于 CPU，选择 2 倍减速。开发者工具会限制您的 CPU 速度，使其比平常慢 2 倍。
图 2. CPU 节流（添加蓝色边框）
设置演示
想要创建让此网站所有读者都能一致地运行运行时性能演示，并非易事。在本部分中，您可以自定义演示，以确保无论您的具体设置如何，您都能获得与本教程中的屏幕截图和说明相一致的体验。
- 继续点击添加 10 次，直到蓝色方块的移动速度明显慢于之前。在高端机器上，大约需要 20 次点击。
点击优化。蓝色方块的移动速度应该会更快，并且更流畅。
点击取消优化。蓝色方块移动得较慢，并且再次出现卡顿现象。
记录运行时性能
运行经过优化的页面后，蓝色方块的移动速度会更快。Why is that? 两个版本都应在相同的时间内使每个方块移动相同量的空间。录制“性能”面板中的记录，了解如何在未优化版本中检测性能瓶颈。
在开发者工具中，点击 Record 图标
。开发者工具会在页面运行时捕获性能指标。
图 3：对页面进行性能分析
等待几秒钟。
点击停止 (Stop)。 开发者工具会停止记录，处理数据，然后在“性能”面板上显示结果。
图 4：分析结果
哇，这是海量的数据。别担心，您很快就会一切变得更好。
分析结果
记录网页性能后，您就可以衡量网页性能不佳并找出原因。
分析每秒帧数
衡量任何动画性能的主要指标是每秒帧数 (FPS)。如果动画以 60 FPS 运行，用户会很满意。
查看 FPS 图表。如果您看到 FPS 上方的红色指示条，则表示帧速率下降得太低，可能会对用户体验造成不利影响。一般来说，绿色竖条越高，FPS 越高。
图 5：添加蓝色边框的 FPS 图表
在 FPS 图表下方，您会看到 CPU 图表。CPU 图表中的颜色对应于“性能”面板底部的摘要标签页中的颜色。CPU 图表充满了颜色这一事实意味着，在记录期间 CPU 已用尽。每当您看到 CPU 长时间达到上限时，系统就会提示设法减少工作量。
图 6：CPU 图表和“摘要”标签页（添加蓝色边框）
将鼠标悬停在 FPS、CPU 或 NET 图表上。此时，开发者工具会显示页面的屏幕截图。左右移动鼠标即可重放录音。这称为拖动，对于手动分析动画进度非常有用。
图 7：查看处于录制 2000 毫秒标记左右的页面的屏幕截图
在帧部分中，将鼠标悬停在其中一个绿色方块上。开发者工具会显示该特定帧的 FPS。每帧可能远低于 60 FPS 的目标。
图 8：将鼠标悬停在帧上
当然，从这个演示可以明显看出，这个网页性能不佳。但在实际情况下，可能没有这么清晰，因此使用所有这些工具进行测量会很方便。
额外知识点：打开 FPS 计量器
另一个方便的工具是 FPS 计量器，它可以在网页加载时实时估算 FPS。
- 按 Command+Shift+P (Mac) 或 Control+Shift+P（Windows、Linux）以打开命令菜单。
- 首先在“命令”菜单中输入
Rendering，然后选择 Show Rendering。 在 Rendering 标签页中，启用 FPS Meter。视口的右上角会显示一个新的叠加层。
图 9：FPS 计量器
停用 FPS Meter，然后按 Esc 键关闭 Rendering 标签页。您不会在本教程中使用它。
找出瓶颈
现在，您已经测量并验证了动画效果不理想，接下来要回答的问题是：为什么？
请注意“ summary”标签页。如果未选择事件，此标签页会显示活动明细。网页将大部分时间花在呈现上。由于性能是减少工作量的艺术，因此您的目标是减少在渲染工作上花费的时间。
图 10：添加蓝色边框的“Summary”标签页
展开 Main 部分。开发者工具会向您显示一个火焰图，显示主线程上的活动随时间的变化情况。x 轴表示一段时间内的记录。每个条形都代表一个事件。较宽的柱形表示事件用时更长。y 轴表示调用堆栈。如果您看到事件相互堆叠，则表示上层事件导致了较低事件。
图 11：添加蓝色边框的“主要”部分
录音中包含大量数据。点击、按住并拖动鼠标在 Overview（包含 FPS、CPU 和 NET 图表的部分）上可放大单个 Animation Frame Fired 事件。Main 部分和 Summary 标签页仅显示录制内容的选定部分的信息。
图 12：放大单个已触发的动画帧事件
请注意 Animation Frame Fired 事件右上角的红色三角形。如果您看到红色三角形，则表示可能存在问题与此事件。
点击 Animation Frame Fired 事件。摘要标签页现在会显示该事件的相关信息。请注意显示链接。点击该按钮后，开发者工具会突出显示启动 Animation Frame Fired 事件的事件。另请注意 app.js:94 链接。点击该按钮即可跳转到源代码中的相关行。
图 13：有关已触发动画帧事件的更多信息
在 app.update 事件下，有许多紫色事件。如果再宽一些，看起来就像每个照片上可能有一个红色三角形。立即点击某个紫色 Layout 事件。开发者工具会在摘要标签页中提供有关该事件的更多信息。实际上，系统会显示有关强制自动重排的警告（布局的另一种说法）。
在摘要标签页中，点击强制布局下的 app.js:70 链接。开发者工具会将您转到强制执行布局的代码行。
图 13：导致强制布局的代码行
好了！这项工作涉及很多内容，但现在您已经为分析运行时性能的基本工作流打下了坚实的基础。太棒了！
额外好处：分析经过优化的版本
使用您刚刚学习的工作流和工具，点击演示上的优化以启用优化后的代码，再进行一次性能记录，然后分析结果。从提高帧速率到减少 Main 部分的火焰图中事件数的减少，您可以看到，优化版应用执行的工作量大大减少，从而提升了性能。
后续步骤
了解性能的基础是 RAIL 模型。通过该模型，您可以了解对用户而言最重要的性能指标。如需了解详情，请参阅使用 RAIL 模型测量性能。
为了更熟练地使用“效果”面板，熟能生巧。请尝试分析您自己的网页并分析结果。如果您对结果有任何疑问，请打开标记为 google-chrome-devtools 的 Stack Overflow 问题。如果可能，请提供屏幕截图或指向可重现页面的链接。
若想成为运行时性能方面的专家，您必须了解浏览器如何将 HTML、CSS 和 JS 转换为屏幕上的像素。您最好从渲染性能概览开始。框架详解深入介绍了更多详细信息。
最后，有很多方法可以提高运行时性能。本教程重点介绍了一个特定的动画瓶颈，以重点引导您了解“性能”面板，但这只是您可能会遇到的众多瓶颈之一。“渲染性能”系列的其他部分提供了许多有关如何改进运行时性能各个方面的实用提示，例如：