让我再次想起这个问题源于前面的一次面试，记得当时问我的一个问题是“创建节点选用哪种方式比较好”，我当时的回答是：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
怿飞：通过 Dom 方法提高 innerHTML 性能
文章来源:http://www.iteye.com/topic/500009
分享到：
相关推荐
最近遇到js的效率问题，是关于在页面中新增元素的问题。 假设我们有页面如下： 复制代码 代码如下: <HTML> <HEAD> </HEAD> <BODY> ”div1″></div> </BODY> [removed] // 脚本位置 ...
博文链接：https://aideqianfang.iteye.com/blog/246585
js中innerHTML与innerText的用法与区别
innerHTML的简单应用
innerHTML的使用document.getElementById("id").innerHTML = "contenttext";
Innerself – 使用innerHTML将React / Redux转换成50行代码
简单日历和innerHTML使用 javascript的简单应用实例 可以自定义Css
千锋Web前端教程_48_日期对象_定时器和innerhtml
解决ajax返回innerHTML中javascript不能运行问题
超全面javaweb第4天-_08_innerHTML属性
InnerHtml和InnerText的区别分析小结
NULL 博文链接：https://wuzhengxuan.iteye.com/blog/1263906
js中innerHTML与innerText的用法与区别js中innerHTML与innerText的用法与区别
innerHTML-outerHTML-innerTEXT
var tbody=document.createElement(‘tbody’); tbody[removed]='<tr><td>IE下tbody的innerHTML是只读的</td></tr>’; //在IE下报错，目标对象错误 现在用jquery的html试试， 代码如下: $(tbody).html(‘<tr>...
HTML标签的innerHTML和value之间的用法的区别
利用innerHTML代替createElement来动态添加网页内容已成为一种普遍的认识。但在商务应用，大数据的datagrid屡见不鲜，就算是innerHTML也捉襟见肘，于是人们又开发了分时加载的技术了（利用setTimeout）。
多数现代浏览器都实现了innerHTML操作，它的方便性让我们爱不释手，但如果使用不当，很容易出现效率问题，本文通过一个例子来说明如何优化innerHTML操作。
innerHtml用法innerHtml用法innerHtml用法innerHtml用法