針對迴流和重繪的渲染優化--公司分享

若是是你，你會如何實現瀏覽器內核，你認爲的瀏覽器渲染的流程是怎麼樣的

工做開發中，你有作過哪些關於性能優化的工做（代碼），或者目前的業務中有哪些是能夠作優化的

瀏覽器渲染機制

什麼是渲染過程？簡單來講，渲染引擎根據 HTML 文件描述構建相應的數學模型，調用瀏覽器各個零部件，從而將網頁資源代碼轉換爲圖像結果，這個過程就是渲染過程（以下流程圖）。

瀏覽器渲染的重要模塊

• HTML 解釋器：將 HTML 文檔通過詞法分析輸出 DOM 樹
• CSS 解釋器：解析 CSS 文檔, 生成樣式規則
• 圖層佈局計算模塊：佈局計算每一個節點的精確位置和大小
• 視圖繪製模塊：進行具體節點的圖像繪製
• JavaScript 引擎：編譯執行 Javascript 代碼

渲染流程圖

渲染過程簡要解析：

1. DOM 樹：解析 HTML 以建立的是 DOM 樹（DOM tree ）：渲染引擎開始解析 HTML 文檔，轉換樹中的標籤到 DOM 節點，它被稱爲「內容樹」。

2. CSSOM 樹：解析 CSS（包括外部 CSS 文件和樣式元素）建立的是 CSSOM 樹。

3. 渲染樹：CSSOM 與 DOM 樹結合，以後咱們獲得的就是渲染樹（Render tree ）。

4. Layout(迴流):根據生成的渲染樹，進行計算(Layout)，獲得節點的幾何信息（絕對位置，大小等佈局信息)

5. Painting(重繪):根據渲染樹以及佈局計算獲得的幾何信息，獲得節點的絕對像素

6. Display:瀏覽器會合併合各個圖層，將數據由 CPU 輸出給 GPU 最終繪製在屏幕上。（複雜的視圖層會給這個階段的 GPU 計算帶來一些壓力，在實際應用中爲了優化動畫性能，咱們有時會手動區分不一樣的圖層）。

渲染樹之Dom樹

渲染樹之CSSOM樹

渲染樹

爲了構建渲染樹，瀏覽器主要完成了如下工做：

1. 從DOM樹的根節點開始遍歷每一個可見節點。
2. 對於每一個可見的節點，找到CSSOM樹中對應的規則，並應用它們
3. 根據每一個可見節點以及其對應的樣式，組合生成渲染樹

不可見的節點包括：

1. 不會渲染輸出的節點，好比script、meta、link等。
2. 經過css進行隱藏的節點。好比display:none。注意，利用visibility和opacity隱藏的節點，仍是會顯示在渲染樹上的。只有display:none的節點纔不會顯示在渲染樹上。

迴流重繪簡介

迴流：頁面佈局和幾何屬性發生改變，更新渲染樹，計算佈局，從新繪製，這個過程就叫回流

重繪：頁面佈局和幾何屬性沒有改變，只是元素外觀發生了變化，更新渲染樹，從新繪製，這一過程叫重繪

模擬渲染函數

致使迴流與重繪的操做

引起迴流的操做：頁面佈局和幾何屬性改變時就須要迴流

1. 添加或者刪除可見的DOM元素；
2. 元素位置改變；
3. 元素尺寸改變——邊距、填充、邊框、寬度和高度
4. 內容改變——好比文本改變或者圖片大小改變而引發的計算值寬度和高度改變；
5. 瀏覽器窗口尺寸改變——resize事件發生時；（迴流是根據視口的大小來計算元素的位置和大小的）
6. 經過js API獲取元素的實時屬性

引起迴流的css屬性和方法

引起重繪的緣由：頁面佈局和幾何屬性沒有改變，只是元素外觀發生了變化

引起重繪的css屬性

如何減小回流與重繪

瀏覽器自身的優化策略

對於每次的迴流與重繪，瀏覽器並非立馬進行迴流和重繪，而是有一個緩存隊列來保存必定時間內的迴流重繪或是必定數量的迴流和重繪，從而進行批量處理，可是獲取佈局實時信息的時候，就會當即處理整個緩存隊列

減小回流和重繪

• 批量修改css樣式（cssText, class）
• 批量處理Dom
  1. 使元素脫離文檔流（display、absolute、fixed、fragment、cloneNode）
  2. 對其進行屢次修改
  3. 將元素帶回到文檔中
• 避免頻繁獲取佈局實時信息（採用變量緩存形式）
• css3開啓GPU加速（transform、opacity、filters動畫），建立獨立圖層,減小對父級上下文的佈局影響
• 使用resize事件的時候，作防抖和節流處理

參考文獻

1. https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/（瀏覽器工做原理）

2. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn