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

概述我们最近在执行基于CSS的动画(丢帧)时遇到了Firefox特定的性能问题,在Chrome中我们可以使用Timeline选项卡轻松调试,但是有类似的工具适用于Firefox吗？对于Firefox桌面和移动设备最好,因为我们的Android设备上的问题最严重.解决方法:从Firefox34开始,有一个profilerintheFirefox

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

解决方法:

从firefox 34开始,有一个profiler in the FirefoxDevTools：

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

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

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

探查器使用devtools协议,因此也适用于远程设备.

话虽如此,像Chrome的时间轴这样的工具可以更好地适应您的用例,它可以显示重新设计,回流,绘画,合成 *** 作.我们现在正在使用这个工具,并且firefox Nightly中有一个Alpha版本(现在是firefox 35)：

总结

以上是内存溢出为你收集整理的android – 在Firefox上调试CSS动画性能全部内容，希望文章能够帮你解决android – 在Firefox上调试CSS动画性能所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。