Monday, March 30th, 2009

Browser Reflows & Repaints; How do they affect performance?

Category: Browsers, CSS, Performance

>Nicole Sullivan has a very detailed post on reflow and repaints and how they affect performance (and also how to potentially avoid them).

What are they again?

A repaint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout. Examples of this include outline, visibility, or background color. According to Opera, repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree. A reflow is even more critical to performance because it involves changes that affect the layout of a portion of the page (or the whole page). Reflow of an element causes the subsequent reflow of all child and ancestor elements as well as any elements following it in the DOM.

And what are they, and how can you avoid them?

So, if they’re so awful for performance, what causes a reflow?

Unfortunately, lots of things. Among them some which are particularly relevant when writing CSS:

  • Resizing the window
  • Changing the font
  • Adding or removing a stylesheet
  • Content changes, such as a user typing text in
    an input box
  • Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)
  • Manipulating the class attribute
  • A script manipulating the DOM
  • Calculating offsetWidth and offsetHeight
  • Setting a property of the style attribute

Mozilla article about reflows that outlines causes and when they could be reduced.

How to avoid reflows or at least minimize their impact on performance?

Note: I’m limiting myself to discussing the CSS impact of reflows, if you are a JavaScripter I’d definitely recommend reading my reflow links, there is some really good stuff there that isn’t directly related to CSS.

  1. Change classes on the element you wish to style (as low in the dom tree as possible)
  2. Avoid setting multiple inline styles
  3. Apply animations to elements that are position fixed or absolute
  4. Trade smoothness for speed
  5. Avoid tables for layout
  6. Avoid JavaScript expressions in the CSS (IE only)

Another guru that we know and love has been doing some very interesting work looking at the actual data behind all of this, and it may have some surprises. I hope to be able to post about that soon!

Related Content:

1 Comment »

Comments feed TrackBack URI

You can use XUL Profiler for Firefox (https://addons.mozilla.org/fr/firefox/addon/9954) in order to track repaints and help you reduce them!

Here is an example on this simple test :
http://blog.techno-barje.fr/public/test-xulprofiler-paint.html
and the result generated by XUL profiler :
http://blog.techno-barje.fr/public/test-xulprofiler-paint-result.html

Comment by alexp — March 31, 2009

Leave a comment

You must be logged in to post a comment.