(转)innerHTML和createElement效率比较
让我再次想起这个问题源于前面的一次面试，记得当时问我的一个问题是“创建节点选用哪种方式比较好”，我当时的回答是：IE下面innerHTML效率更高，而非IE浏览器下面则是createElement更好。可是，面试官觉得我的结论是不正确的，“在各种浏览器下面，innerHTML都要比createElement效率更高的”！
把回来后的一趟子事完成后，开始着手证明一下，其实，我当时回答的也不是没有“证据”，因为我在一个前端博客（DOM操作的性能优化）上面看到这样的结论：“appendChild和innerHTML的效率也是要分浏览器来考虑到，IE浏览器操作innerHTML的效率非常高，而FF和Opera会慢些，尤其是FF，当innerHTML内部元素很多的时候效率极低，毕竟innerHTML是IE首创并发扬光大的。所以可以这么讲：IE的innerHTML效率优于appendChild,而Firefox则是相反。。。”，可惜当时自己看到这样的结论却没有做测试，无demo，无真相啊！
好了，下面是我的三个测试code：
<body>
<div id="container"></div>
<input type="button" value="start" onclick="init()" />
</body>
CODE1：
function init(){
var staDate = new Date();
var container = document.getElementById("container");
for(var i=0;i<500;i++){
var str="<div>test</div>";
container.innerHTML += str;
}
alert(new Date - staDate);
}
CODE2：
function init(){
var staDate = new Date();
var container = document.getElementById("container");
for(var i=0;i<500;i++){
var odiv = document.createElement("div");
var otext = document.createTextNode("text");
odiv.appendChild(otext);
container.appendChild(odiv);
}
alert(new Date - staDate);
}
CODE3：
function init(){
var staDate = new Date();
var container = document.getElementById("container");
var arr = [];
for(var i=0;i<500;i++){
var str="<div>test</div>";
arr.push(str);
}
container.innerHTML = arr.join("");
alert(new Date - staDate);
}
下面是某一次测试得出的数据：
IE7： 3469 109 16
FF： 6072 35 14
Chrome： 3170 3 2
可以看出，第一个程序耗时很大一部分是由于字符串的连接操作造成的，这个问题我以前探讨过：也说说JavaScript字符串连接的效率，另外，innerHTML的效率（耗时）比createElement再append要高！
更改程序，再次验证：
CODE4：
//在代码2的基础上增加一个数量节
function init(){
var staDate = new Date();
var container = document.getElementById("container");
for(var i=0;i<5000;i++){
var odiv = document.createElement("div");
var otext = document.createTextNode("text");
odiv.appendChild(otext);
container.appendChild(odiv);
}
alert(new Date - staDate);
}
CODE5：
//比代码3更严谨，只计算操作innerHTML的时间
function init(){
var container = document.getElementById("container");
var arr = [];
for(var i=0;i<5000;i++){
var str="<div>test</div>";
arr.push(str);
}
var str = arr.join("");
var staDate = new Date();
container.innerHTML = str;
alert(new Date - staDate);
}
IE7： 922 78
FF： 372 144
Chrome： 32 28
看来，IE浏览器操作innerHTML的效率确实非常高，当innerHTML内容很多时，IE效率比FF高，“毕竟innerHTML是IE首创并发扬光大的”，不过，innerHTML的效率显然还是比createElement和append要高！
看来，面试官的结论是正确的，在敬佩的同时对自己当时不作测试感到惋惜！
最后，感谢zhubiao大哥在百忙中抽出时间和我讨论，让我知道“innerHTML属于‘静态’的操作，消耗内存小一点。creatElement相比之下会更消耗内存…”
文章结尾，附上网上一些大牛对这个问题的探讨：
PPK：Benchmark - W3C DOM vs. innerHTML
Dustindiaz：innerHTML and DOM Methods