在前端開發中，效能最佳化是一個永恆的話題。迴流（Reflow）與重繪（Repaint）是兩個重要的概念，它們直接影響著頁面的渲染效能和使用者體驗。本文將詳細介紹迴流與重繪的概念、觸發條件及其最佳化方法。
一、迴流（Reflow）（重排）
1.1 概念
迴流，又稱重排（Reflow），是指當DOM的變化引起元素的幾何屬性（如尺寸、位置等）變化時，瀏覽器需要重新計算元素的佈局，從而影響頁面的渲染樹。這是一種較為耗費效能的操作。
1.2 觸發條件
以下操作可能會觸發迴流：
- 新增、刪除、修改DOM元素
- 改變元素的尺寸（寬度、高度、內邊距、外邊距、邊框等）
- 改變元素的位置（如使用
top、left、bottom、right、float、clear等屬性） - 改變元素的內容（如文字內容的變化）
- 改變元素的顯示狀態（如
display、visibility、overflow等屬性） - 讀取某些屬性（如
offsetWidth、offsetHeight、clientWidth、clientHeight、scrollWidth、scrollHeight等） - 瀏覽器視窗大小變化
二、重繪（Repaint）
2.1 概念
重繪是指當元素的外觀（如顏色、背景、邊框等）發生變化，但不會影響佈局時，瀏覽器會重新繪製元素以呈現新的外觀。相較於迴流，重繪的代價較小，但仍會影響效能。
2.2 觸發條件
以下操作可能會觸發重繪：
- 改變元素的顏色（如
color、background-color、border-color等） - 改變元素的邊框樣式（如
border-style、border-width等） - 改變元素的透明度（如
opacity） - 改變元素的陰影（如
box-shadow）
三、迴流與重繪的最佳化方法
為了提升頁面效能，我們應儘量減少迴流和重繪的次數。以下是一些最佳化建議：
3.1 儘量減少DOM操作
- 批次修改DOM：將多次對DOM的操作合併為一次性操作。
- 使用文件片段（DocumentFragment）：在記憶體中進行DOM操作，然後一次性將其插入文件中。
3.2 避免頻繁訪問會觸發迴流的屬性
- 快取屬性值：將會觸發迴流的屬性值快取起來，避免頻繁訪問。
-
const width = element.offsetWidth; // 使用快取的 width 進行後續操作
3.3 使用CSS3硬體加速
- 使用
transform、opacity、filter等屬性進行動畫或過渡效果，可以利用GPU加速，減少迴流和重繪的開銷。
3.4 低頻率觸發的操作
- 對於頻繁觸發的操作（如滾動事件、視窗大小改變事件），可以使用
requestAnimationFrame或debounce、throttle函式進行節流或防抖處理。
3.5 合理的樣式表結構
- 將影響範圍較大的樣式儘量放在外部樣式表中，減少內聯樣式的使用。
- 避免使用過於複雜的選擇器，儘量簡化選擇器的層級。