(转)innerHTML和createElement效率比较

owhile 2012-08-31

让我再次想起这个问题源于前面的一次面试,记得当时问我的一个问题是“创建节点选用哪种方式比较好”,我当时的回答是: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 性能

相关推荐

swiftwwj / 0评论 2019-12-29