如果對於 reflow 這個概念你還不太清楚或者不知道,請先閱讀:
- 《Notes on HTML Reflow》
- 《What is a reflow?》
- 《Gecko:Reflow Refactoring》
- 《reflow》
- 《形象化的reflow》
- 《樣式的執行效率-reflow》
Yahoo! 性能工程師 Nicole Sullivan 在最新的文章 《Reflows & Repaints: CSS Performance making your JavaScript slow?》 中總結了導致 reflow 發生的一些因素:
- 調整窗口大小(Resizing the window)
- 改變字體(Changing the font)
- 增加或者移除樣式表(Adding or removing a stylesheet)
- 內容變化,比如用戶在input框中輸入文字(Content changes, such as a user typing text in
an input box)
- 激活 CSS 偽類,比如 :hover (IE 中為兄弟結點偽類的激活)(Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling))
- 操作 class 屬性(Manipulating the class attribute)
- 腳本操作 DOM(A script manipulating the DOM)
- 計算 offsetWidth 和 offsetHeight 屬性(Calculating offsetWidth and offsetHeight)
- 設置 style 屬性的值 (Setting a property of the style attribute)
reflow 會引起開銷,影響頁面的性能,那如何才能做到合理的優化呢?Nicole Sullivan 也提供了部分建議:
- 如果想設定元素的樣式,通過改變元素的 class 名 (盡可能在 DOM 樹的最裡層)(Change classes on the element you wish to style (as low in the dom tree as possible))
- 避免設置多項內聯樣式(Avoid setting multiple inline styles)
- 應用元素的動畫,使用 position 屬性的 fixed 值或 absolute 值(Apply animations to elements that are position fixed or absolute)
- 權衡平滑和速度(Trade smoothness for speed)
- 避免使用 table 布局(Avoid tables for layout)
- 避免使用CSS的 Javascript 表達式 (僅 IE 浏覽器)(Avoid JavaScript expressions in the CSS (IE only))