高性能JavaScript DOM編程（1）
我們知道，DOM是用于操作XML和HTML文檔的應(yīng)用程序接口，用腳本進(jìn)行DOM操作的代價很昂貴。有個貼切的比喻，把DOM和JavaScript（這里指ECMScript）各自想象為一個島嶼，它們之間用收費橋梁連接，ECMAScript每次訪問DOM，都要途徑這座橋，并交納“過橋費”,訪問DOM的次數(shù)越多，費用也就越高。因此，推薦的做法是盡量減少過橋的次數(shù)，努力待在ECMAScript島上。我們不可能不用DOM的接口，那么，怎樣才能提高程序的效率？
1、DOM訪問與修改
訪問DOM元素是有代價的（“過橋費”你懂的），修改元素代價更是昂貴，因為它會導(dǎo)致瀏覽器重新計算頁面的幾何變化（重排和重繪）。
當(dāng)然最壞的情況是在循環(huá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é)果第一次運行的時間居然是第二次的千倍！(chrome 版本 44.0.2403.130 m)
1: 2846.700ms 2: 1.046ms
第一段代碼的問題在于，每次循環(huán)迭代，該元素都會被訪問兩次：一次讀取innerHTML的值，另一次重寫它，也就是說，每次循環(huán)都在過橋（重排和重繪將在下一篇講解）！結(jié)果充分表明，訪問DOM的次數(shù)越多，代碼的運行速度越慢。因此，能減少DOM訪問的次數(shù)則盡量減少，盡量留在ECMAScript這端處理。
2、HTML集合 & 遍歷DOM
操作DOM另一個耗能點就是遍歷DOM，一般我們會收集一個HTML集合，比如用getElementsByTagName()，或者用document.links等，我想大家對此都不陌生。收集的結(jié)果是一個類似數(shù)組的集合，它處于一種“實時狀態(tài)”實時存在，這意味著當(dāng)?shù)讓游臋n對象更新時，它也會自動更新。怎么講？很簡單舉個栗子：
<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>
而這正是低效之源！很簡單，跟數(shù)組的優(yōu)化操作一樣，緩存?zhèn)€length變量就ok了（讀取一個集合的length比讀取一個普通數(shù)組的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
當(dāng)集合的長度大的時候（demo是1000），性能提升還是很明顯的。
而《高性能JavaScript》提出了另一個優(yōu)化策略，它指出，“由于遍歷數(shù)組比遍歷集合快，因此如果先將集合元素拷貝到數(shù)組中，那么訪問它的屬性會更快”，經(jīng)過測試，并沒有很好地發(fā)現(xiàn)這個規(guī)律，所以還是不要多此一舉了，測試代碼如下：（有疑義歡迎與我交流探討）
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é)的最后介紹兩個原生DOM方法，querySelector()和querySelectorAll()，相信大家都不陌生，前者返回一個數(shù)組（注意，它們的返回值不像HTML集合一樣會動態(tài)變化），后者返回匹配的第一個元素。好吧，其實并不是所有時候它的性能都優(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
但是因為它是類似CSS的選擇方法，所以在做組合選擇的時候，效率會提升，又方便。比如做如下的組合查詢：
var elements = document.querySelectorAll('#menu a');
var elements = document.querySelectorAll('div.warning, div.notice');
以上就是關(guān)于高性能JavaScript DOM編程的全部內(nèi)容，希望大家可以理解，對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
下面小編就為大家?guī)硪黄胬斫釰avaScript中的繼承(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
JavaScript Event事件學(xué)習(xí)第一章 Event介紹
Events是每一個JavaScript程序核心。什么是事件處理，它有什么問題和怎樣寫出跨瀏覽器的代碼，我將在這一章做一個概述。我也會提供一些有精彩的關(guān)于事件處理程序的細(xì)節(jié)的文章。2010-02-02
用JS動態(tài)設(shè)置CSS樣式常見方法小結(jié)(推薦)
本文給大家總結(jié)了js動態(tài)設(shè)置css樣式的常見方法，非常實用，對js設(shè)置css樣式相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-11-11
JavaScript基礎(chǔ)進(jìn)階之?dāng)?shù)組方法總結(jié)(推薦)
下面小編就為大家?guī)硪黄狫avaScript基礎(chǔ)進(jìn)階之?dāng)?shù)組方法總結(jié)(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Javascript Cookie讀寫刪除操作的函數(shù)
Javascript Cookie讀寫刪除操作的函數(shù)代碼，需要操作cookies的朋友可以參考下。2010-03-03
今天小編就為大家分享一篇layui 富文本編輯器和textarea值的相互傳遞方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本文給大家介紹javascript中的閉包，包括對js閉包概念的理解，閉包的幾種寫法和用法，閉包的主要作用，閉包與this對象，閉包與內(nèi)存泄露及使用閉包的注意點相關(guān)知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
不依賴Flash和任何JS庫實現(xiàn)文本復(fù)制與剪切附源碼下載
本篇文章給大家分享的文本復(fù)制與剪切板功能，實現(xiàn)此功能不依賴falsh插件和任何js庫實現(xiàn)的，感興趣的朋友一起看看吧2015-10-10
JavaScript Serializer序列化時間處理示例
JavaScriptSerializer序列化時間后會把時間序列化成N進(jìn)制的鬼數(shù)據(jù) ，下面有個示例，需要的朋友可以了解下2014-07-07
這篇文章主要為大家總結(jié)了Bootstrap table的簡單使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02