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.

when it is useful to use the headless component pattern. How long will this component live for? Is it worth deliberately preserving the mechanism aside from the interface? Perhaps to use this mechanism in another project with a different look and feel? How frequently is our interface bound to change? Will the same mechanism have multiple interfaces? There is an indirection cost paid when you separate "mechanism" and "policy". You need to be sure that the benefits of separation merit the expense of indirection. I think this is largely where a lot of the MV* patterns of the past went wrong, they started with the axiom that everything should be separated this way; when in reality, mechanism and policy are often deeply coupled or the cost of separation doesn't outweigh the benefits of this sort of separation.