简明现代魔法 -> JavaScript -> push()与createElement()性能比较

push()与createElement()性能比较

2010-09-24

下面的实验是验证push()函数与CreateElement()函数在创建HTML元素的效率。可以看出,实用push()确实效率要比后者要高,不过究竟可以高出多少,还需要有专研精神的朋友去测试了,这里仅仅是抛砖引玉。

效果演示



this is div1
this is div2

JavaScript Code

<script type="text/javascript">
var d = new Date().getTime(), buf = [],
div1 = document.getElementById('div1'),
div2 = document.getElementById('div2'),
t1 = document.getElementById('t1'),
t2 = document.getElementById('t2');

function test1()
{
	for(var i=0; i<1000; i++)
	{
		buf.push('<div><a href="#">测试');
		buf.push(i);
		buf.push('</a></div>');
	}
	div1.innerHTML = buf.join('');
	t1.value = '耗时:' + (new Date().getTime() - d) + ' 毫秒';
}

function test2()
{
	for(var i=0; i<1000; i++){
  		var a = document.createElement('a');
		var div = document.createElement('div');
		a.href = '#';
 		a.innerHTML = '测试';
   		div.appendChild(a);
  		div2.appendChild(div);
	}
 	t2.value = '耗时:' + (new Date().getTime() - d) + ' 毫秒';
}

function clearVal()
{
	div1.innerHTML = '';
	div2.innerHTML = '';
	t1.value = '';
 	t2.value = '';
}
</script>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们