如果對(duì)于 reflow 這個(gè)概念你還不太清楚或者不知道，請(qǐng)先閱讀：
Yahoo! 性能工程師 Nicole Sullivan 在最新的文章 《Reflows & Repaints: CSS Performance making your JavaScript slow?》 中總結(jié)了導(dǎo)致 reflow 發(fā)生的一些因素：
- 調(diào)整窗口大小（Resizing the window）
- 改變字體（Changing the font）
- 增加或者移除樣式表（Adding or removing a stylesheet）
- 內(nèi)容變化，比如用戶在input框中輸入文字（Content changes, such as a user typing text in
an input box）
- 激活 CSS 偽類，比如 :hover (IE 中為兄弟結(jié)點(diǎn)偽類的激活)（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）
- 計(jì)算 offsetWidth 和 offsetHeight 屬性（Calculating offsetWidth and offsetHeight）
- 設(shè)置 style 屬性的值 （Setting a property of the style attribute）
reflow 會(huì)引起開(kāi)銷，影響頁(yè)面的性能，那如何才能做到合理的優(yōu)化呢？Nicole Sullivan 也提供了部分建議：
- 如果想設(shè)定元素的樣式，通過(guò)改變?cè)氐?class 名 (盡可能在 DOM 樹的最里層)（Change classes on the element you wish to style (as low in the dom tree as possible)）
- 避免設(shè)置多項(xiàng)內(nèi)聯(lián)樣式（Avoid setting multiple inline styles）
- 應(yīng)用元素的動(dòng)畫，使用 position 屬性的 fixed 值或 absolute 值（Apply animations to elements that are position fixed or absolute）
- 權(quán)衡平滑和速度（Trade smoothness for speed）
- 避免使用 table 布局（Avoid tables for layout）
- 避免使用CSS的 JavaScript 表達(dá)式 (僅 IE 瀏覽器)（Avoid JavaScript expressions in the CSS (IE only)）
詳細(xì)閱讀：
原文：http://www.planabc.net/2009/04/13/reflow/
本文鏈接：http://www.95time.cn/tech/web/2009/6615.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
