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

Question

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

Answer 1

从 Firefox 34 开始，FirefoxDevTools 中有一个分析器：

Profiler 允许您记录 JavaScript 函数调用。您可以在工具箱的“性能”选项卡中找到分析器（确保在设置中启用了“性能”复选框）。

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

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

分析器使用 devtools 协议，因此也适用于远程设备。

话虽如此，像 Chrome 的时间线这样的工具会随着时间的推移显示重新设计、重排、绘画、合成操作，这将更适合您的用例。实际上，我们现在正在开发这个工具，并且在 Firefox Nightly 中有一个 alpha 版本（现在是 Firefox 35）：