(转)innerHTML跟createElement效率比较
日期：2014-05-17 浏览次数：20888 次
让我再次想起这个问题源于前面的一次面试，记得当时问我的一个问题是“创建节点选用哪种方式比较好”，我当时的回答是：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();
