What's the difference between reflow and repaint?

javascript performance repaint reflow
Jon Raasch picture Jon Raasch · Mar 31, 2010 · Viewed 32.1k times · Source

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

DVK picture DVK · Mar 31, 2010

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

Related questions

Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.? or function myJsFunc() { alert("myJsFunc"); } <a href="javascript:…

Read More
What is the difference between call and apply?

What is the difference between using call and apply to invoke a function? var func = function() { alert('hello!'); }; func.apply(); vs func.call(); Are there performance differences between the two aforementioned methods? When is it best to use call …

Read More
How to efficiently count the number of keys/properties of an object in JavaScript?

What's the fastest way to count the number of keys/properties of an object? It it possible to do this without iterating over the object? i.e. without doing var count = 0; for (k in myobj) if (myobj.hasOwnProperty(k)) count++; (…

Read More