回流與重繪
- 當render tree中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流(reflow)。每個頁面至少需要一次回流，就是在頁面第一次加載的時候。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪。
-
當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。
注意：回流必將引起重繪，而重繪不一定會引起回流！！！
回流何時發生：
當頁面布局和幾何屬性改變時就需要回流。下述情況會發生瀏覽器回流：
1、添加或者刪除可見的DOM元素；
2、元素位置改變；
3、元素尺寸改變——邊距、填充、邊框、寬度和高度
4、內容改變——比如文本改變或者圖片大小改變而引起的計算值寬度和高度改變；
5、頁面渲染初始化；
6、瀏覽器窗口尺寸改變——resize事件發生時；
如何減少回流、重繪
減少回流、重繪其實就是需要減少對render tree的操作（合並多次多DOM和樣式的修改），並減少對一些style信息的請求，盡量利用好瀏覽器的優化策略。具體方法有：
1. 直接改變className，如果動態改變樣式，則使用cssText（考慮沒有優化的瀏覽器）。
2. 讓要操作的元素進行”離線處理”，處理完后一起更新
a) 使用DocumentFragment進行緩存操作,引發一次回流和重繪；
b) 使用display:none技術，只引發兩次回流和重繪；
c) 使用cloneNode(true or false) 和 replaceChild 技術，引發一次回流和重繪。
3.不要經常訪問會引起瀏覽器flush隊列的屬性，如果你確實要訪問，利用緩存
4. 讓元素脫離動畫流，減少回流的Render Tree的規模