push与createElement性能比较

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

效果演示

this is div1

this is div2

JavaScript Code

view source

 

print?

01	<script type="text/javascript">

02	var d = new Date().getTime(), buf = [],

03	div1 = document.getElementById('div1'),

04	div2 = document.getElementById('div2'),

05	t1 = document.getElementById('t1'),

06	t2 = document.getElementById('t2');

07	function test1()

08

{

09	for(var i=0; i<1000; i++)

10

{

11	buf.push('<div><a href="#">测试');

12	buf.push(i);

13	buf.push('</a></div>');

14

}

15	div1.innerHTML = buf.join('');

16	t1.value = '耗时：' + (new Date().getTime() - d) + ' 毫秒';

17

}

18	function test2()

19

{

20	for(var i=0; i<1000; i++){

21	var a = document.createElement('a');

22	var div = document.createElement('div');

23	a.href = '#';

24	a.innerHTML = '测试';

25	div.appendChild(a);

26	div2.appendChild(div);

27

}

28	t2.value = '耗时：' + (new Date().getTime() - d) + ' 毫秒';

29

}

30	function clearVal()

31

{

32	div1.innerHTML = '';

33	div2.innerHTML = '';

34	t1.value = '';

35	t2.value = '';

36

}

37

</script>