當你在撰寫一份網頁的時候 必須去考慮什麼寫法會影響效能 這裡整理了許多瀏覽器渲染的各種影響

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/