push与createElement性能比较

下面的实验是验证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>