Question

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?

Answer 1

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