What's the difference between reflow and repaint?

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?

Styrene

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

Comprehensible

Answer 2

Reflow happens when there is a change to the DOM layout. Reflow is very expensive computationally as dimensions and positions of page elements must be calculated again, then the screen will be repainted.

Example of something that will cause reflow

for (let i = 1; i <= 100; i++ {
const newEle = document.createElement('p');
newEle.textContent = 'newly created paragraph element';

document.body.appendChild(newEle);
}

The above code is very inefficient, causing 100 reflow processes for every new paragraph element appended.

You can mitigate this computationally stressful process by using .createDocumentFragment()

const docFrag = document.createDocumentFragment();

 for (let i = 1; i <= 100; i++ {
    const newEle = document.createElement('p');
    newEle.textContent = 'newly created paragraph element';

    docFrag.appendChild(newEle);
    }

document.body.appendChild(docFrag);

The above code will now instead only use the reflow process 1x for the creation of 100 new paragraph elements.

Repaint is merely the changing of pixels on the monitor, while still taxing it is the lesser of two evils, since a reflow includes a repaint in its procedure.

Gaiseric

instead of creating a document fragment, it would be the same if we create a parent div / span, right? – Fourinhand

Is this actually true? I thought if you call document.body.appendChild() in a loop, you're still in on the main stack. Until that stack clears, there will not be any repaints - so it's not actually any less efficient than document fragment? – Pragmatic

Answer 3

Great explanation that I found here.

• Reflow: compute the layout of each visible element (position and size).
• Repaint: renders the pixels to screen.

Microcosm

Answer 4

In my opinion, repaint just affects the DOM itself, but reflow affects the whole page.

Repaint occurs when some changes which only its skin styles, such as color and visibility.

Reflow occur when the page of DOM changes its layout.

Recently I found a site can search which attribute will trigger repaint or reflow. http://csstriggers.com/

Floccose

Answer 5

Here is another great post: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom

A repaint, or redraw, goes through all the elements and determines their visibility, color, outline and other visual style properties, then it updates the relevant parts of the screen.

A reflow computes the layout of the page. A reflow on an element recomputes the dimensions and position of the element, and it also triggers further reflows on that element’s children, ancestors and elements that appear after it in the DOM. Then it calls a final repaint. Reflowing is very expensive.

It also introduced when reflow occurs and how to minimize reflow.

Ilsa

Answer 6

Reflow is the process of the browser laying out the page. It happens when you first display the DOM (generally after the DOM and CSS have been loaded), and happens again every time something could change the layout. This is a fairly expensive (slow) process.

Repaint happens after reflow as the browser draws the new layout to the screen. This is fairly quick, but you still want to limit how often it happens.

For example, if you add a CSS class to an element, the browser often recalculates the layout of the entire page—that's one reflow and one repaint!

Ostensive