以前在群里曾经和天牛讨论过一次innerHTML和appendChild谁更快的事情，当时也做过一次测试，结果就是，在IE 下，innerHTML比appendChild快，firefox和chrome，safari下，appendChild比innerHTML要快。

当时的代码，是这样的。

向body中插入1000个li，

var str="";

for(var i=0;i<1000;i++){
str+="<li></li>"}
document.body.innerHTML=str;

appendChild

for(var i=0;i<1000;i++){
var li=document.createElement("li");
document.body.appendChild(li);

}

不过已经过了2年了，现在的浏览器，也不是当年的浏览器了，字符串相加也比数组join来的快了，所以我一直有个想法，测试一下现代浏览器。

我的浏览器环境是Chrome 23,Firefox 17,IE9

我的作法，在body中创建1000个p标签

      for(var i=0;i<1000;i++){
           document.body.appendChild(document.createElement("p"));
      }
      var p=document.getElementsByTagName("p");

测试一

测试innerHTML的写法是

for(var i=0;i<1000;i++){
        document.body.appendChild(document.createElement("p"));
    }
    var p=document.getElementsByTagName("p");
   var d=new Date();
   for(var k=0;k<1000;k++){
      p[k].innerHTML="1";
   }
    console.log(new Date()-d);

与之对应的appendChild作法是

for(var i=0;i<1000;i++){
        document.body.appendChild(document.createElement("p"));
    }
    var p=document.getElementsByTagName("p");
    var d=new Date();
    for(var k=0;k<1000;k++){
        p[k].appendChild(document.createTextNode("1"));
    }
    console.log(new Date()-d);

好了，开始测试！

从测试结果看，如果向这一千个P中插入一个字符“1”，那么，显然chrome中，appendChild要比innerHTML快很多，Firefox中也要快一些，IE则相当

测试二

测试innerHTML的写法是

for(var i=0;i<1000;i++){
        document.body.appendChild(document.createElement("p"));
    }
    var p=document.getElementsByTagName("p");
   var d=new Date();
   for(var k=0;k<1000;k++){
      p[k].innerHTML="13";
   }
    console.log(new Date()-d);

与之对应的appendChild作法是

for(var i=0;i<1000;i++){
        document.body.appendChild(document.createElement("p"));
    }
    var p=document.getElementsByTagName("p");
    var d=new Date();
    for(var k=0;k<1000;k++){
        var span=document.createElement("span");
        span.appendChild(document.createTextNode("13"));
        p[k].appendChild(span);
    }
    console.log(new Date()-d);

好了，开始测试！

从测试结果看，如果向这一千个P中插入一个“span”，chrome中，appendChild依然要比innerHTML快很多，Firefox中也会快一些，IE中appendChild就比innerHTML慢多了。

总结，在现代浏览器中，IE9的DOM操作依然比innerHTML慢一些，需要特别对待。