Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
63
rated 0 times [  69] [ 6]  / answers: 1 / hits: 43752  / 14 Years ago, tue, march 30, 2010, 12:00:00

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?


More From » performance

 Answers
27

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


[#97204] Friday, March 26, 2010, 14 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
anniejulietteb

Total Points: 740
Total Questions: 125
Total Answers: 97

Location: Benin
Member since Fri, Mar 24, 2023
1 Year ago
;