android - 在 Firefox 上调试 CSS 动画性能

Question

我们最近在执行基于 CSS 的动画(丢帧)时遇到了 Firefox 特定的性能问题，在 Chrome 中我们可以使用时间轴选项卡轻松调试，但是是否有适用于 Firefox 的类似工具？最好同时适用于 Firefox 桌面版和移动版，因为这个问题在我们的 Android 设备上最为严重。

Answer 1

从 Firefox 34 开始，有一个 profiler in the FirefoxDevTools :

探查器可让您记录 JavaScript 函数调用。您可以在工具箱的“性能”选项卡中找到探查器(确保您在设置中启用了“性能”复选框)。

创建记录后，您会看到一个帧率图和一个条形图，显示每个记录样本上发生的 Activity 类型(网络、JIT、GC、事件、样式、图形、存储)。您还可以在设置中启用“Gecko 平台数据”，以便您在 JavaScript 函数调用堆栈中获得有关渲染引擎花费时间做什么的更多信息。

由于您正在调试与 CSS 相关的性能瓶颈，因此您将主要对样式和图形操作感兴趣。探查器应该可以帮助您缩小到 JavaScript 调用触发这些问题的范围。帧率图表也应该对您非常有用。

探查器使用 devtools 协议(protocol)，因此也适用于远程设备。

话虽如此，像 Chrome 的时间轴这样的工具会随着时间的推移显示重新样式化、回流、绘制、合成操作，这将更适合您的用例。我们现在实际上正在开发这个工具，并且在 Firefox Nightly 中有一个 alpha 版本(现在是 firefox 35):