(转)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>

</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 性能

(转)innerHTML和createElement效率比较

相关推荐