JavaScript中的Repaint和Reflow用法詳解_基礎知識

你是否常聽師兄或一些前端前輩說不能用CSS通配符*，CSS選擇器層疊不能超過三層，CSS盡量使用類選擇器，書寫HTML少使用table，結構要盡量簡單-DOM樹要小....等這些忠告，以前我就大概知道使用通配符或者CSS選擇器層次過多可能會降低性能，至於為什麼不使用table標籤我一直是迷迷糊糊，也就跟著那樣做了，但我認識了Repain和Reflow之後，原來這些都還真不能用太多。 ok,希望這篇文章對你有幫助！

1.什麼是Repaint/Reflow?

好，先上一張圖：瀏覽器解析大概的工作流程

這張圖應該可以很好理解，歸納為四個步驟：

1、解析HTML以建立DOM樹：渲染引擎​​開始解析HTML文檔，轉換樹中的html標籤或js產生的標籤到DOM節點，它稱為 -- 內容樹。
2.建立渲染樹：解析CSS（包含外部CSS檔案和樣式元素以及js產生的樣式），根據CSS選擇器計算出節點的樣式，建立另一個樹 —- 渲染樹。
3.佈局渲染樹: 從根節點遞歸調用，計算每一個元素的大小、位置等，給每個節點所應該出現在螢幕上的精確座標。
4.繪製渲染樹: 遍歷渲染樹，每個節點將使用UI後端圖層來繪製。

好，我們可以看到Repain 和 Reflow 分別出現在第三和第四步了。因此我們給出下面的定義：

    對於DOM結構中的各個元素都有自己的盒子（模型），這些都需要瀏覽器根據各種樣式（瀏覽器的、開發人員定義的等）來計算並根據計算結果將元素放到它該出現的位置，這個過程稱之為reflow；當各種盒子的位置、大小以及其他屬性，例如顏色、字體大小等都確定下來後，瀏覽器於是便把這些元素都按照各自的特性繪製了一遍，於是頁面的內容出現了，這個過程稱之為repaint。
    可見這兩個東東對瀏覽器渲染頁面是很重要的啊，都是會影響效能的，因此我們需要了解一些常見的會引起repaint和reflow的一些操作，並且應該盡量減少以提高渲染速度。

2.引起Repain和Reflow的一些操作

Reflow 的成本比 Repaint 的成本高得多的成本多。 DOM Tree 裡的每個結點都會有 reflow 方法，一個結點的 reflow 很有可能會導致子結點，甚至是父點以及同級結點的 reflow。在一些高效能的電腦上也許還沒什麼，但是如果 reflow 發生在手機上，那麼這個過程是非常痛苦且耗電的。
所以，下面這些動作有很大可能會是成本比較高的。

•     當你增加、刪除、修改 DOM 結點時，會導致 Reflow 或 Repaint。
•     當你移動 DOM 的位置，或是搞個動畫的時候。
•     當你修改 CSS 樣式的時候。
•     當你 Resize 視窗的時候（行動端沒有這個問題），或是滾動的時候。
•     當你修改網頁的預設字體。

註：display:none 會觸發 reflow，而 visibility:hidden 只會觸發 repaint，因為沒有發現位置變化。
3.如何最佳化？

Reflow是不可避免的，只能將Reflow對效能的影響減到最小,給以下幾個建議：

    不要一一修改 DOM 的樣式。與其這樣，不如預先定義好 css 的 class，然後修改 DOM 的 className：

   

 // 不好的写法
  var left = 10,
  top = 10;
  el.style.left = left + "px";
  el.style.top = top + "px";
  // 推荐写法
  el.className += " theclassname";

    把 DOM 離線後修改。如：
    a> 使用 documentFragment 物件在記憶體裡操作 DOM。
    b> 先把 DOM 給 display:none (有一次 repaint)，然後你想怎麼改就怎麼改。例如修改 100 次，然後再把他顯示出來。
    c> clone 一個 DOM 節點到內存裡，然後想怎麼改就怎麼改，改完後，和在線的那個的交換一下。

    不要把 DOM 節點的屬性值放在一個循環裡當成循環裡的變數。不然這會導致大量地讀寫這個結點的屬性。

    盡可能的修改層級比較低的 DOM節點。當然，改變層級比較底的 DOM節點有可能會造成大面積的 reflow，但也可能影響範圍很小。

    為動畫的 HTML 元件使用 fixed 或 absoult 的 position，那麼修改他們的 CSS 是會大幅縮小 reflow 。

    千萬不要使用 table 版面。因為可能很小的小改變會造成整個 table 的重新佈局。

認識了這些是不是對瀏覽器的原理有更大興趣了？ OK,後面會更新關於瀏覽器原理的文章，或者你們可以先去搜搜別人的，因為我覺得理解瀏覽器的原理確實是很重要，可以幫助我們寫出性能更好的website。