What's the difference between reflow and repaint?
javascript, performance, reflow, repaint
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
Problem
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?