在本次教程中，你在页面中打开「DevTools」，并使用「Performance」选项卡来查找页面的性能瓶颈
与台式电脑和笔记本相比，移动设备的CPU的性能要低很多。所以当你分析页面，一般使用CPU限制来模拟页面在移动设备上的表现；
因为很难创建一个使所有用户都表现一致的运行性能演示页面[2]。接下来你需要自定义演示，以确保在你的条件下，你的体验与本教程中看到的屏幕截图和说明相对一致；
wow,这是数据量也太大了吧。但不用担心，接下来你就会知道这些数据的含义的；
记录了页面的性能后，就可以衡量页面的性能有多差，并找出原因。
衡量动画性能的主要指标是每秒帧数（FPS）。当动画以60FPS运行时，用户看着是流畅的[3]。
「图6」：蓝框标识CPU图标和「Summary」选项卡
「图8」：悬停在帧上
在这个演示上，我们能很明显的看出页面效果不好。但在实际情况中，可能不会很明显，因此使用这些工具能很方便的进行检测。
另一个方便的工具是FPS测量仪，它可以在页面运行时提供FPS的实时估算。
「图9」：FPS面板
现在，您已经测量并验证了动画效果不佳，接下来要回答的问题是：为什么？
「图11」：蓝色框是“Main”块
「图12」：关于AnimationFrameFired事件的更多消息
「图13」：触发强制布局的代码行
单击演示页面上的Optimize按钮，启动优化了代码的版本，然后使用刚学习的流程和工具进行性能记录，然后分析结果。从改进的帧率到“Main”块火焰图中事件的减少，你看到优化版本的应用做了更少的工作，从而获得更好的性能；
Devtools是什么:chrome的开发者工具，由几个选项卡工具组成。
无法得到表现一致的演示（译者注）:因为用户的设备配置和performance选项版配置的不同。
THE END