我們知道，DOM是用於操作XML和HTML文件的應用程式介面，用指令碼進行DOM操作的代價很昂貴。有個貼切的比喻，把DOM和JavaScript（這裡指ECMScript）各自想象為一個島嶼，它們之間用收費橋樑連線，ECMAScript每次訪問DOM，都要途徑這座橋，並交納“過橋費”,訪問DOM的次數越多，費用也就越高。因此，推薦的做法是儘量減少過橋的次數，努力待在ECMAScript島上。我們不可能不用DOM的介面，那麼，怎樣才能提高程式的效率？
1、DOM訪問與修改
訪問DOM元素是有代價的（“過橋費”你懂的），修改元素代價更是昂貴，因為它會導致瀏覽器重新計算頁面的幾何變化（重排和重繪）。
當然最壞的情況是在迴圈中訪問或者修改元素，看下面兩段程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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 2 |
1: 2846.700ms 2: 1.046ms |
第一段程式碼的問題在於，每次迴圈迭代，該元素都會被訪問兩次：一次讀取innerHTML的值，另一次重寫它，也就是說，每次迴圈都在過橋（重排和重繪將在下一篇講解）！結果充分表明，訪問DOM的次數越多，程式碼的執行速度越慢。因此，能減少DOM訪問的次數則儘量減少，儘量留在ECMAScript這端處理。
2、HTML集合 & 遍歷DOM
操作DOM另一個耗能點就是遍歷DOM，一般我們會收集一個HTML集合，比如用getElementsByTagName()，或者用document.links等，我想大家對此都不陌生。收集的結果是一個類似陣列的集合，它處於一種“實時狀態”實時存在，這意味著當底層文件物件更新時，它也會自動更新。怎麼講？很簡單舉個例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> <ul id='fruit'> <li> apple </li> <li> orange </li> <li> banana </li> </ul> </body> <script type="text/javascript"> var lis = document.getElementsByTagName('li'); var peach = document.createElement('li'); peach.innerHTML = 'peach'; document.getElementById('fruit').appendChild(peach); console.log(lis.length); // 4 </script> |
而這正是低效之源！很簡單，跟陣列的優化操作一樣，快取個length變數就ok了（讀取一個集合的length比讀取一個普通陣列的lengh要慢很多，因為每次都要查詢）：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
console.time(0); var lis0 = document.getElementsByTagName('li'); var str0 = ''; for(var i = 0; i < lis0.length; i++) { str0 += lis0[i].innerHTML; } console.timeEnd(0); console.time(1); var lis1 = document.getElementsByTagName('li'); var str1 = ''; for(var i = 0, len = lis1.length; i < len; i++) { str1 += lis1[i].innerHTML; } console.timeEnd(1); |
我們看看效能提升能有多少？
|
1 2 |
0: 0.974ms 1: 0.664ms |
當集合的長度大的時候（demo是1000），效能提升還是很明顯的。
而《高效能JavaScript》提出了另一個優化策略，它指出，“由於遍歷陣列比遍歷集合快，因此如果先將集合元素拷貝到陣列中，那麼訪問它的屬性會更快”，經過測試，並沒有很好地發現這個規律，所以還是不要多此一舉了，測試程式碼如下：（有疑義歡迎與我交流探討）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
console.time(1); var lis1 = document.getElementsByTagName('li'); var str1 = ''; for(var i = 0, len = lis1.length; i < len; i++) { str1 += lis1[i].innerHTML; } console.timeEnd(1); console.time(2); var lis2 = document.getElementsByTagName('li'); var a = []; for(var i = 0, len = lis2.length; i < len; i++) a[i] = lis2[i]; var str2 = ''; for(var i = 0, len = a.length; i < len; i++) { str2 += a[i].innerHTML; } console.timeEnd(2); |
本節的最後介紹兩個原生DOM方法，querySelector()和querySelectorAll()，相信大家都不陌生，前者返回一個陣列（注意，它們的返回值不像HTML集合一樣會動態變化），後者返回匹配的第一個元素。好吧，其實並不是所有時候它的效能都優於前者的HTML集合遍歷。
|
1 2 3 4 5 6 7 8 9 10 |
console.time(1); var lis1 = document.getElementsByTagName('li'); console.timeEnd(1); console.time(2); var lis2 = document.querySelectorAll('li'); console.timeEnd(2); // 1: 0.038ms // 2: 3.957ms |
但是因為它是類似CSS的選擇方法，所以在做組合選擇的時候，效率會提升，又方便。比如做如下的組合查詢：
|
1 2 |
var elements = document.querySelectorAll('#menu a'); var elements = document.querySelectorAll('div.warning, div.notice'); |