DIV CSS 佈局教程網

如果對於 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 發生的一些因素：

1. 調整窗口大小（Resizing the window）
2. 改變字體（Changing the font）
3. 增加或者移除樣式表（Adding or removing a stylesheet）
4. 內容變化，比如用戶在input框中輸入文字（Content changes, such as a user typing text in
   an input box）
5. 激活 CSS 偽類，比如 :hover (IE 中為兄弟結點偽類的激活)（Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)）
6. 操作 class 屬性（Manipulating the class attribute）
7. 腳本操作 DOM（A script manipulating the DOM）
8. 計算 offsetWidth 和 offsetHeight 屬性（Calculating offsetWidth and offsetHeight）
9. 設置 style 屬性的值 （Setting a property of the style attribute）

reflow 會引起開銷，影響頁面的性能，那如何才能做到合理的優化呢？Nicole Sullivan 也提供了部分建議：

1. 如果想設定元素的樣式，通過改變元素的 class 名 (盡可能在 DOM 樹的最裡層)（Change classes on the element you wish to style (as low in the dom tree as possible)）
2. 避免設置多項內聯樣式（Avoid setting multiple inline styles）
3. 應用元素的動畫，使用 position 屬性的 fixed 值或 absolute 值（Apply animations to elements that are position fixed or absolute）
4. 權衡平滑和速度（Trade smoothness for speed）
5. 避免使用 table 布局（Avoid tables for layout）
6. 避免使用CSS的 JavaScript 表達式 (僅 IE 浏覽器)（Avoid JavaScript expressions in the CSS (IE only)）

詳細閱讀：

• 《Reflows & Repaints: CSS Performance making your JavaScript slow?》

原文：http://www.planabc.net/2009/04/13/reflow/