分析运行时性能入门
技术作家，Chrome DevTools＆Lighthouse
注意：请参阅优化网站速度以了解如何加快网页加载速度。
运行时性能是页面在运行时执行的方式，而不是加载。本教程将教您如何使用Chrome DevTools Performance面板分析运行时性能。就RAIL模型而言，您在本教程中学到的技能对于分析页面的响应，动画和空闲阶段非常有用。
警告：本教程基于Chrome 59.如果您使用其他版本的Chrome，则DevTools的UI和功能可能会有所不同。检查chrome://help您正在运行的Chrome版本。
开始吧
在本教程中，您将在实时页面上打开DevTools，并使用“性能”面板查找页面上的性能瓶颈。
-
以隐身模式打开Google Chrome 。隐身模式可确保Chrome以干净的状态运行。例如，如果安装了大量扩展，那么这些扩展可能会在性能测量中产生噪音。
-
在“隐身”窗口中加载以下页面。这是您要分析的演示。该页面显示了一堆上下移动的小蓝方块。
https://googlechrome.github.io/devtools-samples/jank/ -
按Command+ Option+ I（Mac）或 Control+ Shift+ I（Windows，Linux）打开DevTools。
图1。左边是演示，右边是DevTools
注意：对于其余的屏幕截图，DevTools将脱离到单独的窗口，以便您可以更好地查看其内容。
模拟移动CPU
移动设备的CPU功率远低于台式机和笔记本电脑。每当您对页面进行概要分析时，请使用CPU限制来模拟您的页面在移动设备上的执行情况。
-
在DevTools中，单击“ 性能”选项卡。
-
确保已启用“ 屏幕截图”复选框。
-
单击捕获设置
。DevTools显示与其如何捕获性能指标相关的设置。 -
对于CPU，请选择2x减速。DevTools限制你的CPU，使其比平时慢2倍。
图2。CPU限制，用蓝色标出
注意：在测试其他页面时，如果要确保它们在低端移动设备上运行良好，请将CPU限制设置为20x减速。这个演示在20x减速时不能很好地工作，所以它只是为了教学目的而使用2x减速。
设置演示
很难创建一个适用于本网站所有读者的运行时性能演示。本部分允许您自定义演示，以确保您的体验与本教程中显示的屏幕截图和说明相对一致，无论您的具体设置如何。
-
继续单击“ 添加10”，直到蓝色方块的移动速度明显慢于之前。在高端机器上，可能需要大约20次点击。
-
单击“ 优化”。蓝色方块应该移动得更快更顺畅。
注意：如果在优化和未优化版本之间没有发现明显差异，请尝试单击减去10几次，然后重试。如果你添加太多的蓝色方块，你只需要最大化CPU，你就不会看到这两个版本的结果有很大差异。
-
单击取消优化。蓝色方块移动得更慢，再次更加猛拉。
记录运行时性能
当您运行页面的优化版本时，蓝色方块移动得更快。这是为什么？两个版本都应该在相同的时间内移动每个方块相同的空间量。在“性能”面板中进行录制，以了解如何检测未优化版本中的性能瓶颈。
-
在DevTools中，单击“ 录制”
。DevTools在页面运行时捕获性能指标。
图3：分析页面
-
等几秒钟。
-
单击停止。DevTools停止记录，处理数据，然后在“性能”面板上显示结果。
图4：配置文件的结果
哇，这是一个压倒性的数据量。别担心，这一切都会很快变得更有意义。
分析结果
一旦您记录了页面的性能，就可以测量页面性能的差异，并找出原因。
分析每秒帧数
测量任何动画性能的主要指标是每秒帧数（FPS）。当动画以60 FPS运行时，用户会很高兴。
-
看看FPS图表。每当你在FPS上方看到一个红色条时 ，就意味着帧速率下降到很低，可能会损害用户体验。通常，绿色条越高，FPS越高。
图5：FPS图表，以蓝色标出
-
在FPS图表下方，您可以看到CPU图表。中相应的颜色 CPU图表对应于颜色摘要选项卡，在性能板的底部。CPU图表充满颜色的事实意味着CPU在录制期间被最大化。每当你看到CPU长时间达到最大值时，就会找到减少工作量的方法。
图6：CPU图表和摘要选项卡，以蓝色标出
-
将鼠标悬停在FPS，CPU或NET图表上。DevTools显示该页面的截图。左右移动鼠标以重放录制内容。这称为擦洗，它对手动分析动画的进展非常有用。
图7：查看记录的2000ms标记周围的页面屏幕截图
-
在“ 框架”部分中，将鼠标悬停在其中一个绿色方块上。DevTools向您显示该特定帧的FPS。每帧可能远低于60 FPS的目标。
图8：悬停在框架上
当然，通过这个演示，很明显该页面表现不佳。但在实际场景中，它可能不太清楚，因此使用所有这些工具进行测量都很方便。
额外奖励：打开FPS表
另一个方便的工具是FPS仪表，它在页面运行时提供FPS的实时估算。
- 按Command+ Shift+ P（Mac）或 Control+ Shift+ P（Windows，Linux）打开命令菜单。
- 开始
Rendering在Command菜单中键入，然后选择Show Rendering。 -
在“ 渲染”选项卡中，启用FPS Meter。视口的右上角会出现一个新的叠加层。
图9：FPS仪表
-
禁用FPS仪表，然后按Escape关闭“ 渲染”选项卡。您将不会在本教程中使用它。
找到瓶颈
现在您已经测量并验证了动画效果不佳，接下来要回答的问题是：为什么？
-
请注意摘要选项卡。如果未选择任何事件，此选项卡会显示活动明细。该页面花费了大部分时间进行渲染。由于性能是减少工作量的艺术，因此您的目标是减少渲染工作所花费的时间。
图10：摘要选项卡，以蓝色标出
-
展开主要部分。随着时间的推移，DevTools会向您显示主线程上的活动火焰图。x轴表示随时间的记录。每个酒吧代表一个活动。更宽的条形意味着事件需要更长时间。y轴表示调用堆栈。当您看到事件堆叠在彼此之上时，意味着上层事件导致较低事件。
图11：主要部分，以蓝色标出
-
录音中有很多数据。通过在Overview（包括 FPS，CPU和NET图表）上单击，按住并拖动鼠标来放大单个Animation Frame Fired事件。“ 主要”部分和“ 摘要” 选项卡仅显示录制的选定部分的信息。
图12：放大单个动画帧触发事件
注：缩放另一种方法是把重点放在主要通过单击其背景或选择事件部分，然后按 W，A，S，和D键。
-
请注意动画帧触发 事件右上角的红色三角形。每当您看到一个红色三角形时，都会警告可能存在与此事件相关的问题。
注意：每当执行回调时都会发生动画帧触发事件
requestAnimationFrame()。 -
单击动画帧触发事件。“ 摘要”选项卡现在显示有关该事件的信息。注意揭示链接。单击它会导致DevTools突出显示启动 动画帧触发事件的事件。另请注意app.js：94链接。单击它会跳转到源代码中的相关行。
图13：有关动画帧触发事件的更多信息
注意：选择事件后，使用箭头键选择旁边的事件。
-
在app.update事件下，有一堆紫色事件。如果它们更宽，看起来每个人都可能有一个红色三角形。现在单击其中一个紫色布局事件。DevTools在“ 摘要”选项卡中提供有关该事件的更多信息。实际上，有关于强制回流的警告（布局的另一个词）。
-
在“ 摘要”选项卡中，单击“ 布局强制”下的app.js：70链接。DevTools将您带到强制布局的代码行。
图13：导致强制布局的代码行
注意：此代码的问题在于，在每个动画帧中，它会更改每个方块的样式，然后查询页面上每个方块的位置。由于样式发生了变化，浏览器不知道每个方块的位置是否发生了变化，因此必须重新布局方块以计算其位置。请参阅避免强制同步布局以了解更多信息。
唷！这需要考虑很多，但您现在已经在分析运行时性能的基本工作流程中拥有坚实的基础。做得好。
奖励：分析优化版本
使用你刚才学到的工作流程和工具，然后单击优化的演示，使优化的代码，采取另一种表现记录，然后对结果进行分析。从改进的帧速率到主要部分火焰图中的事件减少，您可以看到应用程序的优化版本的工作量少得多，从而提高了性能。
注意：即使这个“优化”版本也不是很好，因为它仍然操纵top每个方块的属性。更好的方法是坚持只影响合成的属性。有关详细信息，请参阅为动画使用变换和不透明度更改。
下一步
理解性能的基础是RAIL模型。此模型会向您传授对用户最重要的性能指标。请参阅使用RAIL模型测量性能以了解更多信息。
为了让Performance面板更加舒适，练习更加完美。尝试分析您自己的页面并分析结果。如果您对结果有任何疑问，请 打开标记为的Stack Overflow问题google-chrome-devtools。如果可能，请包含可复制页面的屏幕截图或链接。
要真正掌握运行时性能，您已经了解了浏览器如何将HTML，CSS和JS转换为屏幕上的像素。最好的起点是渲染性能概述。A Frame的剖析深入细节。
最后，有许多方法可以提高运行时性能。本教程重点介绍了一个特定的动画瓶颈，通过“性能”面板为您提供了一个有针对性的游览，但它只是您可能遇到的许多瓶颈之一。渲染性能系列的其余部分有很多改进运行时性能各方面的好技巧，例如：
711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
