你真的瞭解迴流和重繪嗎

渲染的流程基本上是這樣（以下圖黃色的四個步驟）：1.計算CSS樣式 2.構建Render Tree 3.Layout – 定位座標和大小 4.正式開畫

注意：上圖流程中有不少鏈接線，這表示了Javascript動態修改了DOM屬性或是CSS屬性會致使從新Layout，但有些改變不會從新Layout，就是上圖中那些指到天上的箭頭，好比修改後的CSS rule沒有被匹配到元素。

這裏重要要說兩個概念，一個是Reflow，另外一個是Repaint

• 重繪：當咱們對 DOM 的修改致使了樣式的變化、卻並未影響其幾何屬性（好比修改了顏色或背景色）時，瀏覽器不需從新計算元素的幾何屬性、直接爲該元素繪製新的樣式（跳過了上圖所示的迴流環節）。
• 迴流：當咱們對 DOM 的修改引起了 DOM 幾何尺寸的變化（好比修改元素的寬、高或隱藏元素等）時，瀏覽器須要從新計算元素的幾何屬性（其餘元素的幾何屬性和位置也會所以受到影響），而後再將計算的結果繪製出來。這個過程就是迴流（也叫重排） 咱們知道，當網頁生成的時候，至少會渲染一次。在用戶訪問的過程當中，還會不斷從新渲染。從新渲染會重複迴流+重繪或者只有重繪。

迴流一定會發生重繪，重繪不必定會引起迴流。重繪和迴流會在咱們設置節點樣式時頻繁出現，同時也會很大程度上影響性能。迴流所需的成本比重繪高的多，改變父節點裏的子節點極可能會致使父節點的一系列迴流。

1）常見引發迴流屬性和方法

任何會改變元素幾何信息(元素的位置和尺寸大小)的操做，都會觸發迴流，

添加或者刪除可見的DOM元素； 元素尺寸改變——邊距、填充、邊框、寬度和高度 內容變化，好比用戶在input框中輸入文字 瀏覽器窗口尺寸改變——resize事件發生時 計算 offsetWidth 和 offsetHeight 屬性 設置 style 屬性的值

2）常見引發重繪屬性和方法

3）如何減小回流、重繪

• 使用 transform 替代 top
• 使用 visibility 替換 display: none ，由於前者只會引發重繪，後者會引起迴流（改變了佈局）
• 不要把節點的屬性值放在一個循環裏當成循環裏的變量。

for(let i = 0; i < 1000; i++) {
    // 獲取 offsetTop 會致使迴流，由於須要去獲取正確的值
    console.log(document.querySelector('.test').style.offsetTop)
}
複製代碼

• 不要使用 table 佈局，可能很小的一個小改動會形成整個 table 的從新佈局

• 動畫實現的速度的選擇，動畫速度越快，迴流次數越多，也能夠選擇使用 requestAnimationFrame

• CSS 選擇符從右往左匹配查找，避免節點層級過多

• 將頻繁重繪或者回流的節點設置爲圖層，圖層可以阻止該節點的渲染行爲影響別的節點。好比對於 video 標籤來講，瀏覽器會自動將該節點變爲圖層。