知識星球作者：韓子遲
網址：http://www.cnblogs.com/zichi/p/4713031.html
我們知道，DOM是用於操作XML和HTML檔案的應用程式介面，用指令碼進行DOM操作的代價很昂貴。有個貼切的比喻，把DOM和JavaScript（這裡指ECMScript）各自想象為一個島嶼，它們之間用收費橋梁連線，ECMAScript每次訪問DOM，都要途徑這座橋，並交納“過橋費”,訪問DOM的次數越多，費用也就越高。因此，推薦的做法是儘量減少過橋的次數，努力待在ECMAScript島上。我們不可能不用DOM的介面，那麼，怎樣才能提高程式的效率？
1、DOM訪問與修改
訪問DOM元素是有代價的（“過橋費”你懂的），修改元素代價更是昂貴，因為它會導致瀏覽器重新計算頁面的幾何變化（重排和重繪）。
當然最壞的情況是在迴圈中訪問或者修改元素，看下麵兩段程式碼：
var times = 15000;
// code1
console.time(1);
for(var i = 0; i < times; i++) {
document.getElementById(‘myDiv1’).innerHTML += ‘a’;
}
console.timeEnd(1);
// code2
console.time(2);
var str = ”;
for(var i = 0; i < times; i++) {
str += ‘a’;
}
document.getElementById(‘myDiv2’).innerHTML = str;
console.timeEnd(2);
結果第一次執行的時間居然是第二次的千倍！(chrome 版本 44.0.2403.130 m)
1: 2846.700ms
2: 1.046ms
第一段程式碼的問題在於，每次迴圈迭代，該元素都會被訪問兩次：一次讀取innerHTML的值，另一次重寫它，也就是說，每次迴圈都在過橋（重排和重繪將在下一篇講解）！結果充分表明，訪問DOM的次數越多，程式碼的執行速度越慢。因此，能減少DOM訪問的次數則儘量減少，儘量留在ECMAScript這端處理。
2、HTML集合 & 遍歷DOM
操作DOM另一個耗能點就是遍歷DOM，一般我們會收集一個HTML集合，比如用getElementsByTagName()，或者用document.links等，我想大家對此都不陌生。收集的結果是一個類似陣列的集合，它處於一種“實時狀態”實時存在，這意味著當底層檔案物件更新時，它也會自動更新。怎麼講？很簡單舉個慄子：
- apple
- orange
- banana