JS學習筆記：（二）迴流和重繪

在搞清楚迴流和重繪的概念以前，咱們要清除瀏覽器的渲染過程。

• 解析生成DOM Tree（此時包含全部節點，包括display：none）;
• 根據CSS Object Module(CCSSOM)計算節點的幾何屬性（座標和大小）（margin,pading,height,width等），生成Render Tree(不包含display: none的節點);這一過程叫回流或者佈局；
• 在Render Tree進一步渲染其它屬性。如：color等。

   

  重繪：當咱們對 DOM 的修改致使了樣式的變化、卻並未影響其幾何屬性（好比修改了顏色或背景色）時，瀏覽器不需從新計算元素的幾何屬性、直接爲該元素繪製新的樣式（跳過了上圖所示的迴流環節）。

   

  迴流：當咱們對 DOM 的修改引起了 DOM 幾何尺寸的變化（好比修改元素的寬、高或隱藏元素等）時，瀏覽器須要從新計算元素的幾何屬性（其餘元素的幾何屬性和位置也會所以受到影響），而後再將計算的結果繪製出來。這個過程就是迴流（也叫重排）

   

  經過上訴咱們知道：迴流一定引起重繪，重繪不必定引起迴流。迴流的代價比重繪高。

   

  1）搞清楚了迴流和重繪的概念，咱們很容易知道哪些屬性的修改會引發迴流：

• DOM的添加和刪除；
• 頁面的加載；
• 元素尺寸改變——邊距、填充、邊框、寬度和高度；
• 元素位置的改變；
• 內容變化，好比用戶在input框中輸入文字；
• 瀏覽器窗口尺寸改變——resize事件發生時；
• 獲取某些屬性：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight。（瀏覽器爲了返回最精確的值，須要flush隊列，由於隊列中可能會有影響到這些值的操做）

   

  2）常見引發重繪的屬性：

   

  3）如何減小回流、重繪：

• 使用 transform 替代 top
• 使用 visibility 替換 display: none ，由於前者只會引發重繪，後者會引起迴流（改變了佈局）
• 不要把節點的屬性值放在一個循環裏當成循環裏的變量。
• 不要使用 table 佈局，可能很小的一個小改動會形成整個 table 的從新佈局
• 動畫實現的速度的選擇，動畫速度越快，迴流次數越多，也能夠選擇使用 requestAnimationFrame
• CSS 選擇符從右往左匹配查找，避免節點層級過多
• 將頻繁重繪或者回流的節點設置爲圖層，圖層可以阻止該節點的渲染行爲影響別的節點。好比對於 video 標籤來講，瀏覽器會自動將該節點變爲圖層。

   

  瀏覽器的迴流優化機制：瀏覽器會維護1個隊列，把全部會引發重排、重繪的操做放入這個隊列，等隊列中的操做到了必定的數量或者到了必定的時間間隔，瀏覽器就會flush隊列，進行一個批處理。這樣就會讓屢次的重排、重繪變成一次重排重繪。

   

  參考文章：

  前端開發這麼多年，你真的瞭解瀏覽器頁面渲染機制嗎？ | 技術頭條

  瀏覽器重排和重繪