重繪和迴流repaint/reflow

Reflow(渲染)

對於DOM結構中的各個元素都有自己的盒模型，瀏覽器根據各種樣式（瀏覽器的、開發人員定義的等）來計算，並根據計算結果將元素放到它該出現的位置，這個過程稱reflow。

reflow會影響到dom的結構渲染，同時會觸發repaint，他會改變他本身與所有父輩元素(祖先)，這種開銷是非常昂貴的，導致性能下降是必然的，頁面元素越多效果越明顯。

Repaint(重繪)

當各種盒子的位置、大小以及其他屬性，例如顏色、字體大小等都確定下來後，瀏覽器於是便把這些元素都按照各自的特性繪製了一遍，於是頁面的內容出現了，這個過程稱之爲repaint。

repaint發生更改時，元素的外觀被改變，且在沒有改變佈局的情況下發生，如改變outline,visibility,background color，不會影響到dom結構渲染。
　

什麼情況下會觸發瀏覽器的repaint/reflow?

1. DOM元素的添加、修改（內容）、刪除( Reflow + Repaint)
2. 僅修改DOM元素的字體顏色（只有Repaint，因爲不需要調整佈局）
3. 應用新的樣式或者修改任何影響元素外觀的屬性
4. Resize瀏覽器窗口、滾動頁面
5. 讀取元素的某些屬性（offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))
   6.改變字體大小
   7.添加、刪除樣式表
   8.內容的改變，如用戶在輸入框中寫字
   9.激活僞類
   10.設置style屬性

如何避免repaint/reflow?

1. 先將元素從document中刪除，完成修改後再把元素放回原來的位置
2. 將元素的display設置爲”none”，完成修改後再把display修改爲原來的值
3. 如果需要創建多個DOM節點，可以使用DocumentFragment創建完後一次性的加入document 　　
   　　var fragment = document.createDocumentFragment();
   　　fragment.appendChild(document.createTextNode(‘keenboy test 111’));
   　　fragment.appendChild(document.createElement(‘br’));
   　　fragment.appendChild(document.createTextNode(‘keenboy test 222’));
   　　document.body.appendChild(fragment);
4. 集中修改樣式
   　　（1） 儘可能少的修改元素style上的屬性
   　　（2）儘量通過修改className來修改樣式
   　　（3）通過cssText屬性來設置樣式值
   　　　　element.style.width=”80px”; //reflow
   　　　　element.style.height=”90px”; //reflow
   　　　　element.style.border=”solid 1px red”; //reflow
   　　　　以上就產生多次reflow，調用的越多產生就越多
   　　　　element.style.cssText=”width:80px;height:80px;border:solid 1px red;”; //reflow　
   　　（4）緩存Layout屬性值
   　　　　var left=elem.offsetLeft; 多次使用left也就產生一次reflow
   　　（5）設置元素的position爲absolute或fixed
   　　　　元素脫離標準流，也從DOM樹結構中脫離出來，在需要reflow時只需要reflow自身與下級元素
   　　（6）儘量不要用table佈局
   　　　　table元素一旦觸發reflow就會導致table裏所有的其它元素 reflow。在適合用table的場合，可以設置table-layout爲auto或fixed，這樣可以讓table一行一行的渲染，這種做法也是爲了限制reflow的影響範圍
   　　（7）避免使用expression,他會每次調用都會重新計算一遍(包括加載頁面)