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

最佳答案

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

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

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

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

分析器使用 devtools 协议(protocol),因此也适用于远程设备。

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

10-05 20:52
查看更多