前端三十｜03. [CSS] Reflow 及 Repaint 是什麼？
Published in
6 min readSep 18, 2019
昨天 聊了 HTML 控制 JavaScript 載入順序的方法，設定得宜可以提升不少效能；那麼今天就來聊聊可能造成 CSS 影響效能的其中兩位兇手：回流（Reflow）& 重繪（Repaint）。
但在進入正題之前，我們要先認識一下瀏覽器的渲染機制。
本系列文已經重新編校彙整編輯成冊，並正式出版囉！
《前端三十：從 HTML 到瀏覽器渲染的前端開發者必備心法》好評販售中！
喜歡我文章內容的讀者們，歡迎您前往購買支持！
瀏覽器的渲染步驟
上圖是瀏覽器解析網頁的示意圖，為方便理解，我們就簡單拆解成幾個步驟：
- 從 HTML 檔解析出 DOM Tree
- 從 CSS 檔解析出 CSSOM Tree
- 兩者疊加後產生 Render Tree
- Reflow：計算出 Render Tree 上各個元素的物理屬性，如位置、大小、及是否看得見（visible）
- Repaint：將計算結果轉為實際的像素，畫到畫面上
Reflow
如同前述，這個步驟會由 Render Tree 的根結點出發，逐步計算出每一個元素的位置、大小，以及是否被其他元素遮擋等屬性，需要耗費大量的運算資源；也因為是要計算出這些屬性，只要是有可能牽扯到這些屬性的操作，都會觸發 Reflow，例如：
1. 設定 CSS 屬性
- 大小：
width、height - 浮動：
float - 定位：
position - …
2. 使用者進行互動
- 調整瀏覽器視窗大小
- 輸入框的內容變更
3. JavaScript
- DOM 操作
