Layout paint flashing in Firefox
1 February, 2012 § 26 Comments
Writing efficient and responsive websites are important to providing a great user experience. Some website layouts cause inefficient rendering, hurting the experience of the users that we try so hard to please.
Starting in Firefox 11 (currently in the beta channel), there is a hidden preference (nglayout.debug.paint_flashing) to enable what we call “paint flashing”.
Whenever the layout engine determines that a region of the browser requires repainting, the region is tinted with a random color value. Regions experiencing heavy paint flashing can turn your browser in to a fun rave, but also show web developers (and browser developers too!) areas of the code that aren’t being as optimal as possible.
For example, there is currently a bug on file for Firefox where the HTML5 video controls cause unnecessary paint flashing (bug 722261). Modifying the markup for the controls can fix this and improve the performance of the controls. Paint flashing was required to find this inefficiency, and it will also be the tool that we will thank for finding many other inefficiencies as we move forward.
To enable this feature in Firefox, go to about:config and create a new Boolean preference with the name of nglayout.debug.paint_flashing and set the preference to true.