理解重繪和回流：哪個渲染階段受到的影響更大？

2024-01-29 10:57:19 前端筆記 120

在前端開發中，性能優化是一項重要的工作。在改進網頁性能時，我們經常會遇到兩個相關概念：重繪和回流。這兩個概念都與網頁的渲染階段有關，但它們對于性能的影響程度是不同的。本文將從理論和代碼示例兩方面來介紹重繪和回流，并深入討論哪個渲染階段受到的影響更大。

首先，我們來了解一下重繪和回流的定義。重繪是指當元素樣式的改變不影響其布局時，瀏覽器會將新樣式應用于元素并重新繪制它。而回流指的是當元素的尺寸、布局或者樣式發生改變時，瀏覽器會重新計算元素的幾何屬性，并重新布局頁面。重繪發生在回流之后，因此回流會觸發重繪。

那么，重繪和回流對渲染性能的影響哪個更大呢？答案是回流。回流比重繪操作更為復雜，因為它需要重新計算布局信息，并可能引起其他相關元素的重新布局。這意味著回流的開銷更大，對性能的影響更明顯。

下面我們通過具體的代碼示例來說明重繪和回流以及它們的影響差異。

首先，我們創建一個簡單的HTML結構，包含一個按鈕和一個文本框。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        width: 100px;
        height: 30px;
        background-color: blue;
        color: white;
      }
      .text-field {
        width: 200px;
        height: 30px;
        border: 1px solid black;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <button class="button">按鈕</button>
    <input class="text-field" type="text" placeholder="請輸入文本">
  </body>
</html>

接下來，我們使用JavaScript來改變按鈕的顏色。我們分別編寫兩段代碼，一段只改變按鈕的顏色，一段同時改變按鈕和文本框的顏色。

只改變按鈕顏色的代碼如下所示：

var button = document.querySelector('.button');
button.style.backgroundColor = 'red';

同時改變按鈕和文本框顏色的代碼如下所示：

var button = document.querySelector('.button');
var textField = document.querySelector('.text-field');
button.style.backgroundColor = 'red';
textField.style.backgroundColor = 'green';

運行這兩段代碼，并使用瀏覽器的開發者工具來查看重繪和回流的情況。

可以觀察到，只改變按鈕顏色的代碼只觸發了重繪操作，而同時改變按鈕和文本框顏色的代碼不僅觸發了重繪，還觸發了回流操作。這是因為同時改變按鈕和文本框的顏色導致了它們的布局發生了變化，因此瀏覽器需要進行回流計算。

從這個例子中可以明顯看出，回流操作比重繪操作代價更高。因此，在性能優化中，我們應該盡量減少回流的次數。一種常見的做法是使用CSS進行批量操作，例如通過改變CSS的類名來一次性修改多個元素的樣式，從而減少回流的次數。

綜上所述，重繪和回流都是渲染階段中的重要概念，但回流對性能的影響更大。在實際的開發過程中，我們應該盡量減少回流的次數，從而提高網頁的渲染性能。