瀏覽器為了重新渲染部分或整個頁面,重新計算頁面元素位置和幾何結構(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 的原則:
在下面的視頻中(譯註:引用自youtube,無法觀看,請到原文翻牆),lindsey 介紹了一些減少reflow 的方法。
延伸閱讀