创建DOM对象的效率

一般正常的创建方式都是以createElement,appendChild完成，可是之前在工作中碰到了在一个页面中要创建n个代码块并且用动态加载的方式写入页面，效率很低，在IE6及以下版本的浏览器中会造成CPU占用过高，还有内存的泄露危险，但是发现如果用字符串的形式创建DOM对象效率会高出很多，测试代码如下:

 

 

var start = new Date().getTime(),newDOMD,newDOMP;

for(var i=0;i<1000;i++){
  newDOMD = document.createElement("div");
  newDOMP = document.createElement("p");
  newDOMP.innerText = i;    //FF下用textContent属性
  newDOMD.appendChild(newDOMP);
  document.body.appendChild(newDOMD);
}
  
var end = new Date().getTime();
alert(end-start);    //391ms for IE6, 407ms for IE7, 331ms for IE8, 107ms for FF3

-----------------------------------------------------------------------------------------------------------------------------

 

var start = new Date().getTime(),newDOM;

for(var i=0;i<1000;i++){
  newDOM += "<div><p>"+i+"</p></div>";
  
}
  document.body.innerHTML += newDOM;
var end = new Date().getTime();
alert(end-start);     //107ms for IE6,106ms for IE7, 47ms for IE8, 67MS for FF3

 

可以看到在ie6和ff下性能都是后者比较高，ie6下相差3倍,ff下相差较少，考虑到在实际应用情况下DOM结构会比测试情况复杂很多，可以说用字符串方式创建DOM对象性能的提升还是比较明显的。

 

不过在观察代码后发现前者的代码步骤较多，如果只是单创建一个dom对象谁的效率更高那，理论上说创建字符串的效率应该也要高于创建对象再测试一下

 

var start = new Date().getTime(),newDOM;

for(var i=0;i<10000;i++){
  newDOM = "<div></div>";
 
}
 // document.body.innerHTML += newDOM;
var end = new Date().getTime();
document.write(end-start);    //IE基本都在15-16ms, FF只需1ms

 

---------------------------------------------------------------------------------------------------------------------

 

var start = new Date().getTime(),newDOM;

for(var i=0;i<10000;i++){
  newDOM = document.createElement("DIV");
 
}
 // document.body.innerHTML += newDOM;
var end = new Date().getTime();
document.write(end-start);    //IE 266-375ms,  FF 79ms

 

看来区别还蛮大的。