Tracking Reflows for Fun and Profit

One of the biggest performance problem's we're seeing in Firefox OS is lots of reflows. A reflow is when the layout engine needs to calculate the size of the elements in your web page. If your app changes the CSS appearance of an element or modifies the DOM, a reflow calculates how big and where elements should be laid out. Previously, figuring out when / how a reflow occurred was basically guess and check. Thanks to some awesome work by Paul Rouget, Vivien Nicolas, and Etienne Segonzac in Bug 926371. It's just become a lot easier to check when and how expensive your reflow is.

To do this on Firefox Desktop, simply enable the preference 'devtools.webconsole.filter.csslog' in about:config. Then load up Tools->Developer->Web Console and you should see some reflows occurring. I think you need a debug build though? At the moment, you'll need at least Firefox 27 to try this out (Mozilla Aurora branch).

For Firefox OS, it's a little more complicated. You have to setup the app manager, connect to your device, and click debug on the app you want to check your reflows on. This is the only currently supported way to check reflows on a Firefox OS app. Using desktop-b2g, or adb logcat just quite doesn't work. But once it does, you should get something like this:

reflow.png

Now you can see how much time is spent in a reflow. Awesome!