首页 > 代码库 > push与createElement性能比较
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="http://www.mamicode.com/#">测试‘); |
12 | buf.push(i); |
13 | buf.push(‘</a></div>‘); |
14 | } |
15 | div1.innerHTML = buf.join(‘‘); |
16 | t1.value = http://www.mamicode.com/‘耗时：‘ + (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 = http://www.mamicode.com/‘#‘; |
24 | a.innerHTML = ‘测试‘; |
25 | div.appendChild(a); |
26 | div2.appendChild(div); |
27 | } |
28 | t2.value = http://www.mamicode.com/‘耗时：‘ + (new Date().getTime() - d) + ‘ 毫秒‘; |
29 | } |
30 | function clearVal() |
31 | { |
32 | div1.innerHTML = ‘‘; |
33 | div2.innerHTML = ‘‘; |
34 | t1.value = http://www.mamicode.com/‘‘; |
35 | t2.value = http://www.mamicode.com/‘‘; |
36 | } |
37 | </script> |
push与createElement性能比较
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。