JavaScript中createElement与innerHTML添加元素的性能实测与误区分析

JavaScript中createElement与innerHTML添加元素的性能实测与误区分析

近期在处理网页开发时，遇到了关于动态新增页面元素效率的问题。

首先设定一个基础页面结构，例如：

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

接下来，我们需要向id为div1的容器中添加子元素。通常有两种主流写法：

//方法1

div1.innerHTML = '<a href="">测试</a>';

或者采用：

//方法2

var a = document.createElement('a');

a.innertText = '测试';

div1.appendChild(a);

网络上流传着一篇讨论JS效率的文章，声称方法2（createElement）效率更高，其对比测试代码如下：

 
// 方法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);
} 

该测试页面的HTML结构包含：

<div id="container"></div>

<input type="button" value="start" onclick="init();" />

从执行效果来看，方案2似乎比方案1快约10倍。但这是否真实反映了两者的性能差异？实际上，上述测试代码存在明显缺陷。观察方法1中的循环逻辑：

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

其中涉及大量字符串操作，特别是使用了+=操作符进行字符串拼接。在JavaScript中，这种频繁修改innerHTML并拼接字符串的做法会严重拖慢执行效率。因此，用这种有缺陷的代码来对比createElement和innerHTML，对innerHTML是不公平的。很可能是字符串操作消耗了性能，掩盖了innerHTML本身的效率优势。基于此，我重新编写了测试代码：

 <HTML> <HEAD> </HEAD> <BODY> <input type="button" value="测试1" onclick="test1()" /><input type=text readonly id=t1> <input type="button" value="测试2" onclick="test2()" /><input type=text readonly id=t2> <input type="button" value="清空" onclick="div1.innerHTML = ''; div2.innerHTML = ''; t1.value=''; t2.value = '';" /> <div id="div1"></div> <div id="div2"></div> </BODY>  </HTML> 

经过重新测试，发现以下规律：

1、在创建对象数量较少（0至大约10个）时，innerHTML和createElement的效率基本相当，测试数值存在波动；

2、当创建对象数量超过20个时，innerHTML的性能明显优于createElement，平均耗时显示createElement大约是innerHTML的两倍。

总结：执行效率不仅取决于API本身，更与代码编写方式密切相关。若代码编写不当，即使了解API效率也无法体现优势。正如网上那些有缺陷的测试代码，得出了与事实相悖的结论。