最近遇到js的效率问题，是关于在页面中新增元素的问题。
假设我们有页面如下：
复制代码 代码如下:
现在，我们要往div1中添加对象，大家都知道在为web页面增加一个元素时可以使用如下代码：
//方法1
div1.innerhtml = '测试';
或者：
//方法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;ivar str=test
;
container.innerhtml += str;
}
alert(new date - stadate);
}
//方法2
function init(){
var stadate = new date();
var doc = window.document;
for(var i=0;ivar 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);
}
其页面中有：
从执行效果来看方案2要比方案1快10倍左右，到底这是不是真的呢？其实上面的测试代码是有待商榷的，且看其方法1中的循环代码：
复制代码 代码如下:
for(var i=0;ivar str=test
;
container.innerhtml += str;
}
其中有很多字符串操作，而且除了使用+号来连接字符串外，还使用了+=操作符，这就是问题的所在了，在javascript中这种操作字符串的做法是严重影响效率的，所以使用上面的方法来测试createemenent和innerhtml的效率对innerhtml是不公平的， 据此看来很可能是字符串操作吃掉了innerhtml的性能，于是写了下面的测试代码：
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]
经测试发现：
1、在创建的对象较少（0-大约10左右）时，innerhtml和createelement效率差不多，测试值悠忽不定；
2、在创建对象多于20时，innerhtml要比createelement效率高很多，平均测试差不多createelement耗时是innerhtml的两倍。
总结：其实效率也在于编写的代码，在知道可用的api的效率后，怎么编写代码也是非常重要的，否则应由的执行效率不能体现出来，就如上面从网上搜到的那些代码，得出一个与事实相悖的结论。