DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 高性能JavaScript DOM編程(1)
高性能JavaScript DOM編程(1)
編輯:關於JavaScript     

我們知道,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等,我想大家對此都不陌生。收集的結果是一個類似數組的集合,它處於一種“實時狀態”實時存在,這意味著當底層文檔對象更新時,它也會自動更新。怎麼講?很簡單舉個栗子:

<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要慢很多,因為每次都要查詢):

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);

我們看看性能提升能有多少?

0: 0.974ms
1: 0.664ms

當集合的長度大的時候(demo是1000),性能提升還是很明顯的。

而《高性能JavaScript》提出了另一個優化策略,它指出,“由於遍歷數組比遍歷集合快,因此如果先將集合元素拷貝到數組中,那麼訪問它的屬性會更快”,經過測試,並沒有很好地發現這個規律,所以還是不要多此一舉了,測試代碼如下:(有疑義歡迎與我交流探討)

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集合遍歷。

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的選擇方法,所以在做組合選擇的時候,效率會提升,又方便。比如做如下的組合查詢:

var elements = document.querySelectorAll('#menu a');
var elements = document.querySelectorAll('div.warning, div.notice');

以上就是關於高性能JavaScript DOM編程的全部內容,希望大家可以理解,對大家的學習有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved