Layout paint flashing in Firefox

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”.

Steps for enabling paint flashing:

1. Make sure that you have Firefox 11 or higher installed (Beta, Aurora, or Nightly).
2. Go to about:config
3. Accept the warning
4. Right-click and select New -> Boolean
5. Type nglayout.debug.paint_flashing
6. Set the option to true

To disable, just set the option to false

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.

« Older Comments