Javascript createElement和innerHTML增加页面元素的性能对比

  最近遇到js的效率问题,是关于在页面中新增元素的问题。

  假设我们有页面如下:

  

复制代码 代码如下:

  <HTML>

  <HEAD>

  </HEAD>

  <BODY>

  <div id="div1"></div>

  </BODY>

  <script>

  // 脚本位置

  </script>

  </HTML>

  现在,我们要往div1中添加对象,大家都知道在为web页面增加一个元素时可以使用如下代码:

  //方法1

  div1.innerHTML = '<a href="">测试</a>';

  或者:

  //方法2

  var a = document.createElement('a');

  a.innertText = '测试';

  div1.appendChild(a);

  在网上搜索到一个探讨js效率问题的文章,其大概意思是说方法2的效率高,其对比代码如下:

  

复制代码 代码如下:

  // 方法1

  function init(){

  var staDate = new Date();

  var doc = window.document;

  for(var i=0;i<100;i++){

  var str="<div id='div_'"+i+"' style='width:100px; height:20px;background-color:#eee'>test</div>";

  container.innerHTML += str;

  }

  alert(new Date - staDate);

  }

  //方法2

  function init(){

  var staDate = new Date();

  var doc = window.document;

  for(var i=0;i<100;i++){

  var oDiv = doc.createElement("div");

  var oText = doc.createTextNode("text");

  oDiv.appendChild(oText);

  container.appendChild(oDiv);

  oDiv.style.id = "div_"+i;

  oDiv.style.width = "100px";

  oDiv.style.height = "20px";

  oDiv.style.backgroundColor = "#eee";

  }

  alert(new Date - staDate);

  }

  其页面中有:

  <div id="container"></div>

  <input type="button" value="start" onclick="init();" />

  从执行效果来看方案2要比方案1快10倍左右,到底这是不是真的呢?其实上面的测试代码是有待商榷的,且看其方法1中的循环代码:

  

复制代码 代码如下:

  for(var i=0;i<100;i++){

  var str="<div id='div_'"+i+"' style='width:100px; height:20px;background-color:#eee'>test</div>";

  container.innerHTML += str;

  }

  其中有很多字符串操作,而且除了使用+号来连接字符串外,还使用了+=操作符,这就是问题的所在了,在javascript中这种操作字符串的做法是严重影响效率的,所以使用上面的方法来测试createEmenent和innerHTML的效率对innerHTML是不公平的, 据此看来很可能是字符串操作吃掉了innerHTML的性能,于是写了下面的测试代码:

  

   [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  经测试发现:

  1、在创建的对象较少(0-大约10左右)时,innerHTML和createElement效率差不多,测试值悠忽不定;

  2、在创建对象多于20时,innerHTML要比createElement效率高很多,平均测试差不多createElement耗时是innerHTML的两倍。

  总结:其实效率也在于编写的代码,在知道可用的API的效率后,怎么编写代码也是非常重要的,否则应由的执行效率不能体现出来,就如上面从网上搜到的那些代码,得出一个与事实相悖的结论。