用js在清空一个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下，效率差不多