• 原文：minimizing browser reflow
• 作者：lindsey simon
• 翻譯：ytzong

瀏覽器為了重新渲染部分或整個頁面，重新計(jì)算頁面元素位置和幾何結(jié)構(gòu)（geometries）的進(jìn)程叫做 reflow。由于 reflow 是一種瀏覽器中的用戶攔截（user-blocking）操作，所以了解如何減少 reflow 次數(shù)，及不同的文檔屬性（dom 層級（dom depth），css 效率，不用類型的 style 變化）對 reflow 次數(shù)的影響對開發(fā)者來說非常必要。有時 reflow 頁面中的一個元素會 reflow 它的父元素（譯注：這里是復(fù)數(shù)）以及所有子元素。

有多種用戶操作和 dhtml 變化可能會觸發(fā) reflow。調(diào)整瀏覽器窗口的大小，用 javascript 計(jì)算樣式（computed styles），在 dom 中創(chuàng)建刪除元素，改變元素的 class 都會觸發(fā) reflow。值得注意的是，有些操作會多次觸發(fā) reflow，超出你的想象。下圖源自 steve souders 的演講 "even faster web sites"：

從上表可以很明顯的看出，在所有瀏覽器中并非所有 javascript 控制的樣式都觸發(fā) reflow，即使觸發(fā)了觸發(fā)的次數(shù)也不盡相同。同時可以看出現(xiàn)代瀏覽器在控制 reflow 次數(shù)方面做的越來越好。

在 google，我們通過多種方式對我們的頁面及 web 應(yīng)用測速，同時 reflow 是我們增加 ui 時考慮的一個關(guān)鍵因素。我們致力于傳達(dá)輕快的（lively），交互性強(qiáng)的（interactive）和令人愉悅的（delightful）的用戶體驗(yàn)。

原則

下面是一些減小 reflow 的原則：

1. 減少不必要的 dom 層級（dom depth）。改變 dom 樹中的一級會導(dǎo)致所有層級的改變，上至根部，下至被改變節(jié)點(diǎn)的子節(jié)點(diǎn)。這導(dǎo)致大量時間耗費(fèi)在執(zhí)行 reflow 上面。
2. 盡量減少 css 規(guī)則，去除未用到的 css。
3. 如果做復(fù)雜的表現(xiàn)變化，如動畫，讓它脫離文檔流。用絕對定位或 fixed 定位來完成。
4. 避免不必要的復(fù)雜的 css 選擇器，尤其是后代選擇器（descendant selectors），因?yàn)闉榱似ヅ溥x擇器將耗費(fèi)更多的 cpu。

在下面的視頻中（譯注：引用自 youtube，無法觀看，請到原文翻墻），lindsey 介紹了一些減少 reflow 的方法。

延伸閱讀

• mozilla 關(guān)于 html reflow 的記錄（mozilla's notes on html reflow）
• opera 的重繪和 reflow（opera's repaints and reflows）
• satoshi ueyama 在 firefox 中調(diào)試 reflow 的例子（satoshi ueyama's debug-firefox reflow demos）:
  • google.co.jp reflow
  • mozilla.org reflow
  • ja.wikipedia.org reflow
• nicole sullivan 的關(guān)于 reflow 和 重繪（nicole sullivan on reflows and repaints）