- 时间：2021-01-16 12:16 编辑： 来源： 阅读：
- 扫一扫，手机访问
摘要：Javascript createElement和innerHTML增加页面元素的性能对比
最近遇到js的效率问题，是关于在页面中新增元素的问题。
假设我们有页面如下：
[url=]或者：
//方法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中的循环代码：
[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]
经测试发现：
1、在创建的对象较少（0-大约10左右）时，innerHTML和createElement效率差不多，测试值悠忽不定；
2、在创建对象多于20时，innerHTML要比createElement效率高很多，平均测试差不多createElement耗时是innerHTML的两倍。
总结：其实效率也在于编写的代码，在知道可用的API的效率后，怎么编写代码也是非常重要的，否则应由的执行效率不能体现出来，就如上面从网上搜到的那些代码，得出一个与事实相悖的结论。
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
