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

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.

Tagged: ,

§ 26 Responses to Layout paint flashing in Firefox

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading Layout paint flashing in Firefox at JAWS.

meta

Follow

Get every new post delivered to your Inbox.

Join 100 other followers