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的效率后，怎么编写代码也是非常重要的，否则应由的执行效率不能体现出来，就如上面从网上搜到的那些代码，得出一个与事实相悖的结论。

　　推荐阅读

　　js表格分页实现代码

复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h>>>详细阅读

本文标题：Javascript createElement和innerHTML增加页面元素的性能对比

地址：http://www.17bianji.com/kaifa2/JS/28101.html

1/2 1