欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

高性能JavaScript DOM編程（1）

 更新時(shí)間：2015年08月11日 10:37:06   投稿：lijiao  
這篇文章主要介紹了高性能JavaScript DOM編程，如何才能提高程序的效率，想要了解的朋友可以參考一下

我們知道，DOM是用于操作XML和HTML文檔的應(yīng)用程序接口，用腳本進(jìn)行DOM操作的代價(jià)很昂貴。有個(gè)貼切的比喻，把DOM和JavaScript（這里指ECMScript）各自想象為一個(gè)島嶼，它們之間用收費(fèi)橋梁連接，ECMAScript每次訪問(wèn)DOM，都要途徑這座橋，并交納“過(guò)橋費(fèi)”,訪問(wèn)DOM的次數(shù)越多，費(fèi)用也就越高。因此，推薦的做法是盡量減少過(guò)橋的次數(shù)，努力待在ECMAScript島上。我們不可能不用DOM的接口，那么，怎樣才能提高程序的效率？

1、DOM訪問(wèn)與修改
訪問(wèn)DOM元素是有代價(jià)的（“過(guò)橋費(fèi)”你懂的），修改元素代價(jià)更是昂貴，因?yàn)樗鼤?huì)導(dǎo)致瀏覽器重新計(jì)算頁(yè)面的幾何變化（重排和重繪）。

當(dāng)然最壞的情況是在循環(huán)中訪問(wèn)或者修改元素，看下面兩段代碼：

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

結(jié)果第一次運(yùn)行的時(shí)間居然是第二次的千倍！(chrome 版本 44.0.2403.130 m)

1: 2846.700ms
2: 1.046ms

第一段代碼的問(wèn)題在于，每次循環(huán)迭代，該元素都會(huì)被訪問(wèn)兩次：一次讀取innerHTML的值，另一次重寫它，也就是說(shuō)，每次循環(huán)都在過(guò)橋（重排和重繪將在下一篇講解）！結(jié)果充分表明，訪問(wèn)DOM的次數(shù)越多，代碼的運(yùn)行速度越慢。因此，能減少DOM訪問(wèn)的次數(shù)則盡量減少，盡量留在ECMAScript這端處理。

2、HTML集合 & 遍歷DOM
操作DOM另一個(gè)耗能點(diǎn)就是遍歷DOM，一般我們會(huì)收集一個(gè)HTML集合，比如用getElementsByTagName()，或者用document.links等，我想大家對(duì)此都不陌生。收集的結(jié)果是一個(gè)類似數(shù)組的集合，它處于一種“實(shí)時(shí)狀態(tài)”實(shí)時(shí)存在，這意味著當(dāng)?shù)讓游臋n對(duì)象更新時(shí)，它也會(huì)自動(dòng)更新。怎么講？很簡(jiǎn)單舉個(gè)栗子：

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

而這正是低效之源！很簡(jiǎn)單，跟數(shù)組的優(yōu)化操作一樣，緩存?zhèn)€length變量就ok了（讀取一個(gè)集合的length比讀取一個(gè)普通數(shù)組的lengh要慢很多，因?yàn)槊看味家樵儯?/p> 

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

當(dāng)集合的長(zhǎng)度大的時(shí)候（demo是1000），性能提升還是很明顯的。

而《高性能JavaScript》提出了另一個(gè)優(yōu)化策略，它指出，“由于遍歷數(shù)組比遍歷集合快，因此如果先將集合元素拷貝到數(shù)組中，那么訪問(wèn)它的屬性會(huì)更快”，經(jīng)過(guò)測(cè)試，并沒(méi)有很好地發(fā)現(xiàn)這個(gè)規(guī)律，所以還是不要多此一舉了，測(cè)試代碼如下：（有疑義歡迎與我交流探討）

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

本節(jié)的最后介紹兩個(gè)原生DOM方法，querySelector()和querySelectorAll()，相信大家都不陌生，前者返回一個(gè)數(shù)組（注意，它們的返回值不像HTML集合一樣會(huì)動(dòng)態(tài)變化），后者返回匹配的第一個(gè)元素。好吧，其實(shí)并不是所有時(shí)候它的性能都優(yōu)于前者的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

但是因?yàn)樗穷愃艭SS的選擇方法，所以在做組合選擇的時(shí)候，效率會(huì)提升，又方便。比如做如下的組合查詢：

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

以上就是關(guān)于高性能JavaScript DOM編程的全部?jī)?nèi)容，希望大家可以理解，對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論