码迷,mamicode.com
首页 > 其他好文 > 详细

push与createElement性能比较

时间:2014-11-09 15:05:10      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   ar   java   sp   for   div   on   

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

效果演示

this is div1
this is div2

JavaScript Code

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>

push与createElement性能比较

标签:style   http   io   ar   java   sp   for   div   on   

原文地址:http://www.cnblogs.com/xiaoyang002/p/4085039.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!