Repaints involve changes to an element's visibility or styling properties that do not affect layout, like borders or outlines. Reflows affect layout, like changes to position or display. Reflows can be expensive and hurt performance by making the UI appear sluggish. The document discusses causes of repaints and reflows like changing colors or resizing, and provides tips to optimize by minimizing reflows and repaints.

1. Repaint & Reflow
by Kingsley Zheng

2. ● Repaint ( redraw )
Elements skin changes visibility , but do not affect it's
layout
e.g. outline , border
● Reflow
Affect the layout of a portion of the page
e.g. position , display
Repaints and reflows can be expensive, they can hurt
the user experience, and make the UI appear sluggish.
What is the different ?

3. What causes a repaint ?

4. ● Change Visibility : hidden to visible
● Change background , border-color , color
● Elements skin changes visibility , but do not affect it's
layout

5. What causes a reflow ?

6. ● Resizing the window
● Changing the font
● Adding or removing a stylesheet
● Content changes, such as a user typing text in an
input box
● Activation of CSS pseudo classes such as :hover (in
IE the activation of the pseudo class of a sibling)
● Manipulating the class attribute
● A script manipulating the DOM
● Calculating offsetWidth and offsetHeight
● Setting a property of the style attribute

7. Position

8. Property Change

9. Optimize
minimize reflow & repaint times

10. Create DOM

11. Get DOM before end
Get DOM first

12. Layout float

13. Dialog & Overlay
BetterBad!!!

14. Reference
● Yahoo關於性能優化的N條規則
http://www.ozchamp.com/knowledge_detail_727_ntid_147.html
● REFLOWS & REPAINTS: CSS PERFORMANCE
MAKING YOUR JAVASCRIPT SLOW?
http://www.stubbornella.org/content/2009/03/27/reflows-repaints-
css-performance-making-your-javascript-slow
● Repaint and reflow
https://dev.opera.com/articles/efficient-javascript/?page=3#reflow
● Rendering: repaint, reflow/relayout, restyle
http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/