接上次的测试，在清空一个DOM元素时会发生什么

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

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

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

测试一

测试innerHTML的写法是

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

与之对应的removeChild作法是

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

好了，开始测试！

从测试结果看，如果向这一万个P中清空唯一的子元素，那么，所有的浏览器，removeChild都要略快一些。Firefox的效率真是出人意料！

测试二，直接清空body

测试innerHTML的写法是

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

与之对应的removeChild作法是

for(var i=0;i<10000;i++){
        var p=document.createElement("p");
        p.innerHTML="1";
        document.body.appendChild(p);
    }
    var p=[].slice.call(document.getElementsByTagName("p"));

    var d=new Date();
    for(var i=0;i<10000;i++){
        document.body.removeChild(p[i]);
    }
    console.log(new Date()-d);

好了，开始测试！

从测试结果看，如果直接清空body，firefox和chrome下，removeChild都要稍微慢一些，不过IE却快很多

总结，在IE下，removeChild比innerHTML=""有效，chrome和firefox下，效率差不多