頁面的重匯和迴流

重匯和迴流的簡介：

1. 當render tree中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建。這就稱爲迴流(reflow)。每一個頁面至少須要一次迴流，就是在頁面第一次加載的時候。在迴流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並從新構造這部分渲染樹，完成迴流後，瀏覽器會從新繪製受影響的部分到屏幕中，該過程成爲重繪。

2. 當render tree中的一些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，好比background-color。則就叫稱爲重繪。

注意：迴流必將引發重繪，而重繪不必定會引發迴流。

**何時會發生迴流?

當頁面佈局和幾何屬性改變時候就須要迴流。下面的狀況會引起瀏覽器的迴流：

1：添加或者刪除可見的DOM元素

2：元素位置改變；

3：元素尺寸改變----邊距、填充、邊框、高度和寬度

4：內容改變---好比文本改變或者圖片大小改變而引發的計算值寬度和高度改變

5：頁面渲染初始化

6：瀏覽器窗口尺寸改變---resize事件發生時

**何時發生重繪？

1.改變字體

2.增長或者移除樣式表

3.內容變化（input框輸入文字）

4.激活css僞類    eg   :hover

5.計算offsetWidth、offsetHeigth屬性（瀏覽器的可見高度）

6.設置style屬性的值

3.如何減小回流、重繪

減小回流、重繪其實就是須要減小對render tree的操做（合併屢次DOM和樣式的修改），並減小對一些style信息的請求，儘可能利用好瀏覽器的優化策略。具體方法：

1. 直接改變className，若是動態改變樣式，則使用cssText（考慮沒有優化的瀏覽器）

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

a) 使用DocumentFragment進行緩存操做,引起一次迴流和重繪；

<script type="text/javascript">
var fragment=document.createDocumentFragment();
var spanNode=document.createElement("div");
for(var i =0;i<10;i++){
(function(i){
spanNode.innerHTML=spanNode.innerHTML+"number:"+i+"<br>";
fragment.appendChild(spanNode);
})(i)
}
document.body.appendChild(fragment);
</script>

b) 使用display:none技術，只引起兩次迴流和重繪；
c) 使用cloneNode(true or false) 和 replaceChild 技術，引起一次迴流和重繪；

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

4. 讓元素脫離動畫流，減小回流的Render Tree的規模