為什麼說js操作DOM會影響效能呢？

在瀏覽器中DOM得實現和ECMAScript是分離得。

在IE中EMCMAScript是實現在jscript.dll中，DOM實現在mshtml.dll中。在Chrome中使用Webkit中的WebCore處理DOM和渲染，ECMAScript是在V8引擎中實現的。其他瀏覽器也類似。

因此在使用js操作DOM的時候是通過js程式碼呼叫DOM的介面，這就相當於兩個互相獨立的模組發生互動，這樣的效能損耗是非常高的。

然後影響DOM操作效能的主要原因是它會導致瀏覽器重繪和重排。

瀏覽器渲染的原理

我以前寫過：站在瀏覽器角度談前端優化

簡單理解為瀏覽器解析html形成DOM樹，解析css形成CSSOM樹，然後他兩合併成渲染樹。然後根據Layout佈局對映到螢幕上。當頁面發生重繪或者重排的話，瀏覽器會重新計算，消耗很多的效能，

重繪

頁面某些部分需要重新繪製，由於節點的幾何屬性發生改變或者由於樣式發生變化。例如改變元素的背景，螢幕上的部分內容發生改變需要更新，發生重繪。發生重繪元素的位置和尺寸都不會變，

重排

元素的位置或者尺寸發生改變。瀏覽器會重新計算渲染樹。因為位置和尺寸更改勢必會影響整體的佈局，這樣損耗的效能比較高。分為部分重排和全部重排，應該避免全部重排。重排比會重繪。