javascript程式碼效能優化簡單介紹

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

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

何時發生：

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)) 

如何避免：

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. 集中修改樣式 

　　4.1儘可能少的修改元素style上的屬性 

　　4.2儘量通過修改className來修改樣式

　　4.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.4快取Layout屬性值 

　　　　var left=elem.offsetLeft; 多次使用left也就產生一次reflow

　　4.5設定元素的position為absolute或fixed

　　　　元素脫離標準流，也從DOM樹結構中脫離出來，在需要reflow時只需要reflow自身與下級元素

　　4.6儘量不要用table佈局

　　　　table元素一旦觸發reflow就會導致table裡所有的其它元素 reflow。在適合用table的場合，可以設定table-layout為auto或fixed，這樣可以讓table一行一行的渲染，這種做法也是為了限制reflow的影響範圍

　　4.7避免使用expression,他會每次呼叫都會重新計算一遍(包括載入頁面)