https://tutorial.jumpdesign.tw/web_tutorial.html

在網頁開發中，「避免過多重繪」是指減少瀏覽器對網頁進行不必要的重新繪製 (Repaint) 操作，從而提高性能，降低延遲，並改善用戶體驗。重繪的過多發生會導致網頁卡頓或性能下降。

什麼是重繪？

當網頁元素的外觀（如顏色、邊框、陰影）發生變化，但不影響其幾何形狀或佈局時，瀏覽器會執行重繪。這是瀏覽器渲染過程的一部分：

1. 重排（Reflow）：需要重新計算佈局和元素的位置。
2. 重繪（Repaint）：在佈局確定後，更新元素的外觀。
3. 合成（Composite）：將所有繪製的內容合成，並呈現到屏幕上。

過多重繪的問題

過多重繪會增加瀏覽器的工作負擔，因為每次重繪都需要消耗 CPU 或 GPU 資源。當頻繁觸發重繪（例如滾動頁面或動態更新樣式）時，可能導致以下問題：

• 性能下降：頁面卡頓或滯後。
• 用戶體驗變差：動畫不流暢或出現明顯延遲。
• 電量消耗增大：尤其在移動設備上，頻繁重繪會耗費更多電量。

如何避免過多重繪？

1. 合理使用 CSS 屬性

• 避免頻繁改變會觸發重繪的屬性：
  • 會觸發重繪的屬性包括：color、background-color、visibility、outline 等。
  • 儘量改變不會影響繪製流程的屬性，例如 transform 或 opacity（這些只會觸發「合成」階段，而非重繪）。

2. 優化動畫和過渡效果