淺談CSS重繪和迴流（重排）—— 如何減少重繪和迴流（重排）

瀏覽器的渲染過程

1. 解析HTML，構建DOM樹

2. 解析CSS，生成CSS規則樹

3. 合併DOM樹和CSS規則，生成render樹

4. 佈局render樹（Layout/reflow），負責各元素尺寸、位置的計算

5. 繪製render樹（paint），繪製頁面像素信息

6. 瀏覽器會將各層的信息發送給GPU，GPU會將各層合成（composite），顯示在屏幕上
   

基本概念

• 重繪：當頁面元素樣式改變不影響元素在文檔流中的位置時（如background-color，border-color，visibility），瀏覽器只會將新樣式賦予元素並進行重新繪製操作。

• 迴流：當渲染樹render tree中的一部分或全部因爲元素的規模尺寸、佈局、隱藏等改變時，瀏覽器重新渲染部分DOM或全部DOM的過程

• 迴流必將引起重繪，而重繪不一定會引起迴流。

什麼時候會觸發迴流或重繪？

• 添加或刪除可見的DOM元素

• 元素的位置發生變化

• 元素的尺寸發生變化（包括外邊距、內邊框、邊框大小、高度和寬度等）

• 內容發生變化，比如文本變化或圖片被另一個不同尺寸的圖片所替代。

• 頁面渲染初始化

• 瀏覽器的窗口resize尺寸變化（因爲迴流是根據視口的大小來計算元素的位置和大小的）

• 最複雜的一種：獲取某些屬性，引發迴流

  (1) offset(Top/Left/Width/Height)
  (2) scroll(Top/Left/Width/Height)
  (3) cilent(Top/Left/Width/Height)
  (4) width,height
  (5) 調用了getComputedStyle()或者IE的currentStyle

如何減少重繪和迴流（重排）

一、 CSS中避免迴流、重繪

1. 儘可能在DOM樹的最末端改變class
2. 避免設置多層內聯樣式
3. 動畫效果應用到position屬性爲absolute或fixed的元素上
4. 避免使用table佈局
5. 使用css3硬件加速，可以讓transform、opacity、filters等動畫效果不會引起迴流重繪

二、 JS操作避免迴流、重繪

1. 避免使用JS一個樣式修改完接着改下一個樣式，最好一次性更改CSS樣式，或者將樣式列表定義爲class的名稱
2. 避免頻繁操作DOM，使用文檔片段創建一個子樹，然後再拷貝到文檔中
3. 先隱藏元素，進行修改後再顯示該元素，因爲display:none上的DOM操作不會引發迴流和重繪
4. 避免循環讀取offsetLeft等屬性，在循環之前把它們存起來
5. 對於複雜動畫效果,使用絕對定位讓其脫離文檔流，否則會引起父元素及後續元素大量的迴流

講在後面

• 推薦一篇博文很棒很贊很全面👍文章一部分來源於此：從輸入URL到頁面加載的過程？如何由一道題完善自己的前端知識體系！
• 本篇很淺層次，更多細點可理解這篇博文：你真的瞭解迴流和重繪嗎