快捷導航

優(yōu)化innerHTML操作(提高代碼執(zhí)行效率)

更新時間：2011年08月20日 22:55:44 作者：

多數(shù)現(xiàn)代瀏覽器都實現(xiàn)了innerHTML操作，它的方便性讓我們愛不釋手，但如果使用不當，很容易出現(xiàn)效率問題，本文通過一個例子來說明如何優(yōu)化innerHTML操作。

例子：我們要實現(xiàn)的效果是當用戶點擊鼠標的時候，就在舊數(shù)據(jù)上追加若干新數(shù)據(jù)。
　　如果使用標準DOM的話，完整代碼如下：

 
<html> 
<head> 
<title>test</title> 
</head> 
<body> 
<div> 
<p>data<p> 
</div> 
<script> 
document.onmousedown = function() { 
for (var i = 0; i < 10; i++) { 
var p = document.createElement("p"); 
p.appendChild(document.createTextNode(Math.random())); 
document.getElementsByTagName('div')[0].appendChild(p); 
} 
}; 
</script> 
</body> 
</html> 

注：一旦結(jié)構(gòu)比較復雜的話，標準DOM需要編寫冗長的代碼。
　　如果使用innerHTML的話，部分代碼如下：

復制代碼代碼如下:

 
<script> 
document.onmousedown = function() { 
var html = ""; 
for (var i = 0; i < 10; i++) { 
html += "<p>" + Math.random() + "<p>"; 
} 
document.getElementsByTagName('div')[0].innerHTML += html; 
}; 
</script> 

注：innerHTML沒有標準DOM中的appendChild，所以使用了『+=』的方式，效率低下。
　　我們可以結(jié)合使用innerHTML和標準DOM，這樣二者的優(yōu)點就兼得了，部分代碼如下：

復制代碼代碼如下:

 
<script> 
document.onmousedown = function() { 
var html = ""; 
for (var i = 0; i < 10; i++) { 
html += "<p>" + Math.random() + "<p>"; 
} 
var temp = document.createElement("div"); 
temp.innerHTML = html; 
while (temp.firstChild) { 
document.getElementsByTagName('div')[0].appendChild(temp.firstChild); 
} 
}; 
</script> 

注：創(chuàng)建一個元素，然后注入innerHTML，接著在元素上使用標準DOM操作。
　　還不算完，Asynchronous innerHTML給出了更強悍的解決方法，部分代碼如下：

復制代碼代碼如下:

 
<script> 
document.onmousedown = function() { 
var html = ""; 
for (var i = 0; i < 10; i++) { 
html += "<p>" + Math.random() + "<p>"; 
} 
var temp = document.createElement('div'); 
temp.innerHTML = html; 
var frag = document.createDocumentFragment(); 
(function() { 
if (temp.firstChild) { 
frag.appendChild(temp.firstChild); 
setTimeout(arguments.callee, 0); 
} else { 
document.getElementsByTagName('div')[0].appendChild(frag); 
} 
})(); 
}; 
</script> 