減少reflow

• 原文： Minimizing browser reflow
• 作者：Lindsey Simon
• 翻譯： ytzong

瀏覽器為了重新渲染部分或整個頁面，重新計算頁面元素位置和幾何結構（geometries）的過程叫做reflow。由於reflow 是一種瀏覽器中的使用者攔截（user-blocking）操作，所以了解如何減少reflow 次數，及不同的文件屬性（DOM 層級（DOM depth），CSS 效率，不用類型的style 變化）對reflow 次數的影響對開發者來說非常必要。有時reflow 頁面中的一個元素會reflow 它的父元素（譯註：這裡是複數）以及所有子元素。

有多種使用者操作和DHTML 變更可能會觸發reflow。調整瀏覽器視窗的大小，用javascript 計算樣式（ computed styles ），在DOM 中建立刪除元素，改變元素的class 都會觸發reflow。值得注意的是，有些操作會多次觸發reflow，超出你的想像。下圖源自Steve Souders 的演講" Even Faster Web Sites "：

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

在Google，我們透過多種方式對我們的頁面及Web 應用測速，同時reflow 是我們增加UI 時考慮的關鍵因素。我們致力於傳達輕快的（lively），互動性強的（interactive）和令人愉悅的（delightful）的使用者體驗。

原則

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

1. 減少不必要的DOM 層級（DOM depth）。改變DOM 樹中的一級會導致所有層級的改變，上至根部，下至被改變節點的子節點。這導致大量時間耗費在執行reflow 上面。
2. 盡量減少CSS 規則，去除未使用的CSS。
3. 如果做複雜的表現變化，如動畫，讓它脫離文件流。用絕對定位或fixed 定位來完成。
4. 避免不必要的複雜的CSS 選擇器，尤其是後代選擇器（descendant selectors），因為為了匹配選擇器將耗費更多的CPU。

在下面的影片中（譯註：引用自youtube，無法觀看，請到原文翻牆），Lindsey 介紹了一些減少reflow 的方法。

延伸閱讀

• Mozilla 關於HTML reflow 的記錄（Mozilla's Notes on HTML reflow）
• Opera 的重繪和reflow（Opera's Repaints and reflows）
• Satoshi Ueyama 在Firefox 中調試reflow 的例子（Satoshi Ueyama's debug-Firefox reflow demos）:
  • google.co.jp reflow
  • mozilla.org reflow
  • ja.wikipedia.org reflow
• Nicole Sullivan 的關於reflow 和重繪（Nicole Sullivan on Reflows and Repaints）

譯文原文： http://www.99css.com/2009/06/minimizing-browser-reflow.html