有關javascript的效能優化 (repaint和reflow)_基礎知識

複製程式碼 程式碼如下:

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

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

何時發生：
. DOM元素的新增、修改（內容）、刪除( Reflow Repaint)
. 僅修改DOM元素的字體顏色（只有Repaint，因為不需要調整版面）
. 套用新的樣式或修改任何影響元素外觀的屬性
. Resize瀏覽器視窗、捲動頁面
. 讀取元素的某些屬性（offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Left/Width/ Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))

如何避免：
. 先將元素從document中刪除，完成修改後再把元素放回原來的位置
. 將元素的display設置為”none”，完成修改後再把display修改為原來的值
. 如果需要建立多個DOM節點，可以使用DocumentFragment建立完後一次性的加入document 　　

var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode('keenboy test 111'));
fragment.appendChild(document.createElement('bro'); >fragment.appendChild(document.createTextNode('keenboy test 222'));
document.body.appendChild(fragment);
. 集中修改樣式
　　4.1盡可能少屬性的修改元素style上的少屬性
　　4.2盡量透過修改className來修改樣式
　　4.3透過cssText屬性設定樣式值
　　　　element.style.width=”80px”;　　　element.style.width=”80px”;　　　element.style.width=”80px”; ; //reflow
　　　　element.style.border=”solid 1px red”; //reflow
　　　　以上就產生多次reflow，調用的越多產生就越多
　　以上就產生多次reflow，調用的越多產生就越多
　　　　　H width:80px;height:80px;border:solid 1px red;”; //reflow　
　　4.4緩存Layout屬性值
　　　　var leftelem=elem）就使用也產生多次設定元素的position為absolute或fixed
　　　　元素脫離標準流，也從DOM樹結構中脫離出來，在需要reflow時只需要reflow自身與下級元素
　　4.6　table佈局　　4.7避免使用expression,他會每次調用都會重新計算一遍(包含載入頁)

參考：

Yahoo! 效能工程師 Nicole Sullivan 在最新的文章 《Reflows & Repaints: CSS Performance making your JavaScript slow?》