什麼是迴流(重排 reflow)？什麼是重繪(repaint)？如何減小回流、重繪？

什麼是迴流(重排 reflow)？

迴流（重排 reflow）：對DOM樹進行渲染，只要修改DOM或修改元素的形狀大小，就會觸發reflow，reflow的時候，瀏覽器會使已渲染好受到影響的部分失效，並從新構造這部分，完成reflow後，瀏覽器會從新繪製受影響的部分到屏幕中

（繼昨日每日一題：display:none和visibility:hidden 當display顯示及隱藏元素時，顯示時佔據空間，隱藏時不佔空間，隱藏先後DOM結構發生變化，因此須要從新渲染 當visibility顯示及隱藏元素時，不管是顯示仍是隱藏，都佔據空間，所以隱藏先後DOM結構未發生變化，因此不須要從新渲染。）

什麼是重繪(repaint)？

重繪(repaint)：當咱們對DOM的修改致使的樣式變化，但未影響幾何屬性時，瀏覽器不須要從新計算元素的幾何屬性，直接能夠爲該元素繪製新的樣式，跳過了迴流環節，這個過程就叫重繪。

 

結論：迴流一定會發生重繪，重繪不必定發生迴流

 

在頁面交互中存在頻繁的迴流與重繪，這個過程，會很大程度的影響性能，由於迴流所需成本比重繪高的多，so，能用重繪就不要用迴流了。

 

如何減小回流、重繪？

減小回流、重繪就是減小對DOM的操做

1.直接改變className，若是動態改變樣式，則使用cssText（減小設置多項內聯樣式）

2.讓要操做的元素進行「離線處理」，處理完後一塊兒更新

當使用DocumentFragment進行緩存操做，引起一次迴流和重繪

使用display:none 技術，只引起兩次迴流和重繪

使用cloneNode(true or false)和replaceChild技術，引起一次迴流和重繪

3.不要常常訪問會引發瀏覽器flush隊列的屬性，若是你確實要訪問，利用緩存

4.讓元素脫離動畫流，減小render 樹的規模

5.犧牲平滑度換取速度

6.避免使用table佈局

7.IE中避免使用javascript表達式