一、訪問與修改DOM
DOM和JS 相當於兩個島嶼，訪問操作的次數越多，要交的過路費越多，對效能產生很大影響。
減少訪問DOM的次數，把運算儘量留在JS端操作。
二、innerHTML 對比 DOM 方法
1、對於原生的DOM方法和innerHTML比較，效能相差無幾。
2、對於大量操作，針對不同瀏覽器，效能不一樣，因此取決於經常用的瀏覽器。
3、建議從可讀性、穩定性、編碼習慣來決定使用哪種方式。在對字串經過優化後，innerHTML效能可以得到大幅提升。
三、操作上的優化
1、節點克隆
例如：
var tr = document.createElement("tr"); var otd = document.createElement("td"); for(var i = 1; i<=1000; i++) { tr.appendChild(otd.cloneNode(false)); }
2、HTML集合
document 中的方法getElementByName、getElementByTag、getElementByClassName 和屬性images、links、forms返回的都是集合。
由於HTML集合一直與文件保持著聯絡，每次你需要更新最新資訊時，都會重複執行查詢的過程，哪怕只是獲取集合裡的元素。
在相同的情況下，遍歷一個陣列，明顯快於一個HTML集合。
訪問一個較小的集合，很多情況下快取Length就夠了。toArray()函式可做為一個通用的集合轉陣列函式，但轉換時，需考慮轉換後，會多遍歷一次。
3、選擇最高效的API
DOM API 提供了多種方法，使用時儘量選擇最高效的API，例如，遍歷查詢childNodes 會比nextSibling 慢很多。
4、元素節點
children 比childNodes 快很多，childElementCount 比childNodes.length 快。
5、使用選擇器時，儘量合併一次操作。
如：document.querySelectorAll("div.warning, div.notice")
6、不要再重繪佈局改變時，查詢它。如：
bodystyle.color='red'; tem=computed.backgroundColor; bodystyle.color='white'; tem=computed.backgroundImage; //高效寫法 bodystyle.color='red'; bodystyle.color='white'; tem=computed.backgroundColor; tem=computed.backgroundImage;
7、改變樣式
多次操作style 樣式，不如直接修改其CSS樣式，style.cssText，改變className更容易維護。
8、批量修改DOM
當需要批量修改DOM時，可以通過以下步驟來減少重繪或重排的次數：
a、使元素脫離文件
隱藏元素，應用修改，再重新顯示。
在DOM之外建立一個子樹，再將其拷迴文件。
將原始元素拷貝到一個脫離文件的節點中，修改副本，再替換原始元素。
b、對其應用多重改變
c、把元素帶回文件中
9、快取佈局資訊
將頻繁操作的元素資訊，儲存到變數裡，再進行操作。
10、讓元素脫離動畫流
元素的大小、位置動畫變化時，會帶來大量的文件重繪。儘量使用元素的絕對定位來使其脫離文件流。
11、tr:hover 類似效果效能會降低很多。
12、事件委託
避免事件的多次繫結和冒泡，阻止預設動作。