常用插入DOM节点方法性能分析

[LiuYueKai]

测试内容

将html拼成字符串之后，添加到对应dom节点时通常可以使用如下方法：

• innerHTML
• insertAdjacentHTML
• append
• html

测试方法

通过如下示例代码比较如下4种方法在插入节点时的性能：

    var data1 = new Date();
    for (var i = 0; i < len; i++) {
        $('#parentid')[0].innerHTML = h;
    }
    var data2 = new Date();
    for (var i = 0; i < len; i++) {
        $('#parentid').append(h);
    }
    var data3 = new Date();
    for (var i = 0; i < len; i++) {
        $('#parentid')[0].insertAdjacentHTML('beforeend', h);
    }
    var data4 = new Date();
    for (var i = 0; i < len; i++) {
        $('#parentid').html(h);
    }
    var data5 = new Date();


    console.log(data2 - data1 + ':innerHTML');
    console.log(data3 - data2 + ':append');
    console.log(data4 - data3 + ':insertAdjacentHTML');
    console.log(data5 - data4 + ':html');

测试结果

在IE8下的测试结果如下：

4922:html
3078:append
1718:innerHTML
1152:insertAdjacentHTML