歡迎光臨
每天分享高質量文章

高效能JavaScript DOM程式設計

作者:韓子遲

網址: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
贊(0)

分享創造快樂