Monday, March 30th, 2009
>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?
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!