如何減少迴流和重繪
阿新 • • 發佈：2022-05-10
一、什麼是迴流於重排
1.迴流
通過構造渲染樹，將可見DOM節點以及它對應的樣式結合起來，計算它們在裝置視口(viewport)內的確切位置和大小，這個計算的階段就是迴流。
為了弄清每個物件在網站上的確切大小和位置，瀏覽器從渲染樹的根節點開始遍歷，我們可以以下面這個例項來表示：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Critial Path: Hello world!</title> </head> <body> <div style="width: 50%"> <div style="width: 50%">Hello world!</div> </div> </body> </html>
我們可以看到，第一個div將節點的顯示尺寸設定為視口寬度的50%，第二個div將其尺寸設定為父節點的50%。而在迴流這個階段，我們就需要根據視口具體的寬度，將其轉為實際的畫素值。
2.重繪
我們通過構造渲染樹和迴流階段，知道了哪些節點是可見的，以及可見節點的樣式和具體的幾何資訊(位置、大小)，那麼我們就可以將渲染樹的每個節點都轉換為螢幕上的實際畫素，這個階段就叫做重繪節點。
3.何時發生迴流跟重繪
迴流這一階段主要是計算節點的位置和幾何資訊，那麼當頁面佈局和幾何資訊發生變化的時候，就需要回流。比如以下情況：
- 新增或刪除可見的DOM元素
- 元素的位置發生變化
- 元素的尺寸發生變化（包括外邊距、內邊框、邊框大小、高度和寬度等）
- 內容發生變化，比如文字變化或圖片被另一個不同尺寸的圖片所替代。
- 頁面一開始渲染的時候（這肯定避免不了）
- 瀏覽器的視窗尺寸變化（因為迴流是根據視口的大小來計算元素的位置和大小的）
注意：迴流一定會觸發重繪，而重繪不一定會迴流
根據改變的範圍和程度，渲染樹中或大或小的部分需要重新計算，有些改變會觸發整個頁面的重排，比如，滾動條出現的時候或者修改了根節點。