Debugging CSS animation performance on Firefox

Question

We recently run into a Firefox-specific performance issue when doing CSS-based animation (dropped frames), in Chrome we can easily debug with Timeline tab, but is there similar tool that works for Firefox? Preferably for both Firefox desktop and mobile, as the issue is most severe on our android device.

Answer 1

As of Firefox 34, there's a profiler in the FirefoxDevTools:

The Profiler lets you record JavaScript function calls. You can find the profiler in the "performance" tab in the toolbox (make sure you have the "performance" checkbox enabled in the settings).

Once you created a record, you'll see a framerate graph along with a bar graph showing the types of activities that occurred on each recorded sample (network, JIT, GC, events, styles, graphics, storage). You can also enable the "Gecko platform data" in the settings so that you get more information in the JavaScript function calls stack about what the rendering engine spent time doing.

Since you're debugging a CSS related performance bottleneck, you'll mostly be interested in styles and graphics operations. The profiler should hopefully help you narrow down to what JavaScript calls trigger these problems. The framerate graph should also be quite useful to you.

The profiler makes use of the devtools protocol, so works on remote devices too.

Having said that, a tool like Chrome's timeline which shows restyles, reflows, paint, compositing operations as time goes would be more adapted to your use case. We are actually working on this tool right now, and there's an alpha version in Firefox Nightly (firefox 35 right now):