Reflow & Repaint

網頁渲染過程

  1. 解析HTML檔案，生成DOM Tree
  2. 解析CSS樣式，生成CSSOM
  3. 兩者合併成Render Tree
  4. 忽略不可見節點：例如 <head> 標籤、<script> 標籤以及設有 display: none 的元素不會被包括在 Render Tree 中
  5. 計算每個可見元素的佈局(尺寸和位置)
  6. 將Render Tree計算結果繪製到畫面上

Rendering

Reflow (回流)

定義

  • 當Render Tree的佈局改變，就會重新計算DOM的位置和大小

觸發時機

  • 修改 DOM 結構
  • 修改 CSS 屬性（尤其是佈局相關的屬性，如 width、height、margin 等）
  • 修改 window 大小
  • 使用 JavaScript 改變元素佈局或者位置

備註

  • 影響性能較大
  • 只要觸發Reflow，至少會觸發一次Repaint

Repaint (重繪)

定義

  • Render Tree的樣式改變 ，例如單純改變外觀顏色，不影響佈局

觸發時機

  • 改變元素顏色
  • 改變元素的背景
  • 元素隱藏或顯示 (visibility)

備註

  • 影響性能較小
  • Repaint 不一定觸發 Reflow

減少Reflow的次數

  • DOM的層級避免過深
  • 使用CSS的class來變更樣式，避免使用inline style
  • 避免使用table排版，table中任何一個元素被修改，都會導致整個table重新渲染
  • 使用 CSS 的 transform 動畫效果，以減少由 top 和 left 屬性變化引起的重排
  • 避免強制同步佈局事件: 例如 offsetWidth, offsetHeight, getComputedStyle 等，會觸發瀏覽器同步計算，導致不必要的重排

參考資料

# web # 效能