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

@LiuYueKai 2016-08-21 14:44:02发表于 iuap-design/blog

测试内容

将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