繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript createElement和innerHTML增加页面元素的性能对比
- Javascript
- jQuery生成asp.net服务器控件的代码
- javascript 实现的完全兼容鼠标滚轴缩放图片的代码
- JavaScript学习笔记（十七）js 优化
- 使用SyntaxHighlighter实现HTML高亮显示代码的方法
- javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
- 利用jQuery 实现GridView异步排序、分页的代码
- jquery.lazyload 实现图片延迟加载jquery插件
- Lazy Load 延迟加载图片的 jQuery 插件
- jquery 插件实现图片延迟加载效果代码
- javascript小数计算出现近似值的解决办法
- jquery1.4后 jqDrag 拖动 不可用
- jquery 应用代码 方便的排序功能
- 选择TreeView控件的树状数据节点的JS方法(jquery)
- jquery 图片Silhouette Fadeins渐显效果
- JQuery Dialog(JS 模态窗口,可拖拽的DIV)
- javascript 同时在IE和FireFox获取KeyCode的代码
- js 键盘记录实现(兼容FireFox和IE)
- javascript 函数速查表
- jQuery AnythingSlider滑动效果插件
- 经典海量jQuery插件 大家可以收藏一下
Javascript createElement和innerHTML增加页面元素的性能对比
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 89 ::
收藏到网摘: n/a
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 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
经测试发现：
1、在创建的对象较少（0-大约10左右）时，innerHTML和createElement效率差不多，测试值悠忽不定；
2、在创建对象多于20时，innerHTML要比createElement效率高很多，平均测试差不多createElement耗时是innerHTML的两倍。
总结：其实效率也在于编写的代码，在知道可用的API的效率后，怎么编写代码也是非常重要的，否则应由的执行效率不能体现出来，就如上面从网上搜到的那些代码，得出一个与事实相悖的结论。
评论 (0) All
