Search code examples
javascriptperformancerepaintreflow

What's the difference between reflow and repaint?

I'm a little unclear on the difference between reflow + repaint (if there's any difference at all)

Seems like reflow might be shifting the position of various DOM elements, where repaint is just rendering a new object. E.g. reflow would occur when removing an element and repaint would occur when changing its color.

Is this true?

Solution

  • This posting seems to cover the reflow vs repaint performance issues

    http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

    As for definitions, from that post:

    A repaint occurs when changes are made to an elements skin that changes visibly, but do not affect its layout.

    Examples of this include outline, visibility, background, or 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).

    Examples that cause reflows include: adding or removing content, explicitly or implicitly changing width, height, font-family, font-size and more.

    Learn which css-properties effect repaint and review at http://csstriggers.com