回流 reflow 和重繪 repaint

首先先介紹瀏覽器解析的工作原理：

1.解析html文件建立dom樹

2.解析css(包含外部css以及js生成的)構建渲染樹，計算出節點的樣式

3.布局渲染樹，以根節點遞迴呼叫，計算每乙個節點的大小，位置等，給出每乙個節點出現在螢幕的精準目標

4.繪製渲染樹，遍歷渲染樹，每個幾點使用ui後端層來繪製

可以看出，reflow和repaint分別出現在3/4步，現在我們給出定義：

根據dom結構中，每個元素都有自己的盒子，這些需要瀏覽器根據各種樣式(瀏覽器的/開發人員定義的)來計算並根據結果將元素放置在該出現的位置，這個過程稱之reflow(設定頁面布局)，每個頁面至少需要完成一次回流，就是頁面載入的時候

當各種盒子的位置/大小/以及其它屬性都確定下來後，瀏覽器於是便把這些元素都按照各自的特性繪製一遍，於是頁面的內容出現了，這個過程稱之為repaint，當渲染樹中某些元素更新一些只影響元素外觀風格的屬性，而不影響布局，比如background-color，這個過程就是重繪。

注意：

1.回流必將引起重繪，重繪不一定引起回流

2.回流的成本比重繪的成本高很多

3.display:none 會引起回流，visibility:hidden 只會引起重繪，因為位置沒有改變

所以我們可以得出結論：

repaint的發生僅僅是在元素的外觀發生變化而布局沒有改變的情況下

reflow發生在dom結構發生改變

eg:1.dom元素的新增，修改，刪除(reflow+repaint)

2.僅僅改變dom元素的字型顏色(repaint)

3.window的resize(reflow+repaint)

4.滾動滾動條(reflow+repaint)

5.應用新的樣式

reflow & repaint的開銷是非常大的，所以在開發中應該注意:

1.避免多次設定行內樣式，避免分別單獨設定樣式，這都會多次觸發reflow

2.使用classname，classname可以滿足多個樣式一次修改，只進行一次reflow

3.當要批量操作乙個dom樹時，可以將其現在dom樹中刪除，帶操作完成後，在新增到文件樹，避免多次reflow

4.當某一區域需要頻繁地操作dom時，可以將其外部包裹乙個fixed或者absolute布局

5.避免使用table布局，因為table布局一旦觸發reflow，就會導致table裡所有其他元素reflow

6.使用display：none；只引起兩次回流和重繪

7.如果需要建立多個dom節點，可以使用documentfragment建立完後一次性的加入document 　

var fragment = document.createdocumentfragment();