Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the difference between reflow and repaint?

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?

like image 579
Jon Raasch Avatar asked Mar 30 '10 22:03

Jon Raasch


People also ask

What is the difference between reflow and repaint?

Repaint differs from reflow as reflow involves changes that affect layout of an element, repaint occurs when changes are made to an elements skin, but do not affect its layout like setting outline, visibility, background or color property of an element.

What causes a reflow?

If you measure the size or position of an element at this stage, the browser needs to recalculate the whole DOM in order to give you the real answer. The reflow happens when during Javascript we mutate the DOM and then measure it.

What is Page reflow?

Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document.

Why adding some CSS to an element might cause reflow to happen?

Repainthappens 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!


1 Answers

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

like image 143
DVK Avatar answered Sep 21 '22 15:09

DVK