快捷導(dǎo)航

Javascript createElement和innerHTML增加頁(yè)面元素的性能對(duì)比

更新時(shí)間：2009年09月17日 20:59:05 作者：

Javascript之createElement和innerHTML增加頁(yè)面元素的性能對(duì)比

最近遇到j(luò)s的效率問(wèn)題，是關(guān)于在頁(yè)面中新增元素的問(wèn)題。
假設(shè)我們有頁(yè)面如下：

 
<HTML> 
<HEAD> 
</HEAD> 
<BODY> 
<div id="div1"></div> 
</BODY> 
<script> 
// 腳本位置 
</script> 
</HTML> 

現(xiàn)在，我們要往div1中添加對(duì)象，大家都知道在為web頁(yè)面增加一個(gè)元素時(shí)可以使用如下代碼：
//方法1
div1.innerHTML = '<a href="">測(cè)試</a>';
或者：
//方法2
var a = document.createElement('a');
a.innertText = '測(cè)試';
div1.appendChild(a);
在網(wǎng)上搜索到一個(gè)探討js效率問(wèn)題的文章，其大概意思是說(shuō)方法2的效率高，其對(duì)比代碼如下：

復(fù)制代碼代碼如下:

 
// 方法1 
function init(){ 
var staDate = new Date(); 
var doc = window.document; 
for(var i=0;i<100;i++){ 
var str="<div id='div_'"+i+"' style='width:100px; height:20px;background-color:#eee'>test</div>"; 
container.innerHTML += str; 
} 
alert(new Date - staDate); 
} 
//方法2 
function init(){ 
var staDate = new Date(); 
var doc = window.document; 
for(var i=0;i<100;i++){ 
var oDiv = doc.createElement("div"); 
var oText = doc.createTextNode("text"); 
oDiv.appendChild(oText); 
container.appendChild(oDiv); 
oDiv.style.id = "div_"+i; 
oDiv.style.width = "100px"; 
oDiv.style.height = "20px"; 
oDiv.style.backgroundColor = "#eee"; 
} 
alert(new Date - staDate); 
} 

其頁(yè)面中有：
<div id="container"></div>
<input type="button" value="start" onclick="init();" />
從執(zhí)行效果來(lái)看方案2要比方案1快10倍左右，到底這是不是真的呢？其實(shí)上面的測(cè)試代碼是有待商榷的，且看其方法1中的循環(huán)代碼：

復(fù)制代碼代碼如下:

 
for(var i=0;i<100;i++){ 
var str="<div id='div_'"+i+"' style='width:100px; height:20px;background-color:#eee'>test</div>"; 
container.innerHTML += str; 
} 

其中有很多字符串操作，而且除了使用+號(hào)來(lái)連接字符串外，還使用了+=操作符，這就是問(wèn)題的所在了，在javascript中這種操作字符串的做法是嚴(yán)重影響效率的，所以使用上面的方法來(lái)測(cè)試createEmenent和innerHTML的效率對(duì)innerHTML是不公平的，據(jù)此看來(lái)很可能是字符串操作吃掉了innerHTML的性能，于是寫(xiě)了下面的測(cè)試代碼：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

經(jīng)測(cè)試發(fā)現(xiàn)：
1、在創(chuàng)建的對(duì)象較少（0-大約10左右）時(shí)，innerHTML和createElement效率差不多，測(cè)試值悠忽不定；
2、在創(chuàng)建對(duì)象多于20時(shí)，innerHTML要比createElement效率高很多，平均測(cè)試差不多createElement耗時(shí)是innerHTML的兩倍。
總結(jié)：其實(shí)效率也在于編寫(xiě)的代碼，在知道可用的API的效率后，怎么編寫(xiě)代碼也是非常重要的，否則應(yīng)由的執(zhí)行效率不能體現(xiàn)出來(lái)，就如上面從網(wǎng)上搜到的那些代碼，得出一個(gè)與事實(shí)相悖的結(jié)論。

您可能感興趣的文章: