JavaScript innerHTML和createElement效率对比

前言:

在DOM节点操作中,innerHTML和createElement都可以实现创建元素。它们实现的功能类似,但是效率却相差很大。本文分别统计用innerHTML字符串拼接方式、innerHTML数组方式和createElement方式创建1000次元素的时间,来比较它们之间效率的高低。

比较思路:

  1. 使用new调用创建日期对象
  2. 完成1000次创建相同元素后的时间,减去创建之前的时间,即为过程所用的时间(单位:ms)
  3. 比较三种方式所用的时间

比较过程:

1. innerHTML字符串拼接方式

代码:

function fn() {
    var d1 = +new Date();
    var str = '';
    for (var i = 0; i < 1000; i++) {
        document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
    }
    var d2 = +new Date();
    console.log(d2 - d1);
}
fn();

所用时间:
(刷新页面测试3次)


2. innerHTML数组方式

代码:

function fn() {
    var d1 = +new Date();
    var array = [];
    for (var i = 0; i < 1000; i++) {
        array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
    }
    document.body.innerHTML = array.join('');
    var d2 = +new Date();
    console.log(d2 - d1);
}
fn();

所用时间:
(刷新页面测试3次)


3. createElement方式

代码:

function fn() {
    var d1 = +new Date();
    for (var i = 0; i < 1000; i++) {
        var div = document.createElement('div');
        div.style.width = '100px';
        div.style.height = '2px';
        div.style.border = '1px solid red';
        document.body.appendChild(div);
    }
    var d2 = +new Date();
    console.log(d2 - d1);
}
fn();

所用时间:
(刷新页面测试3次)


总结:

  1. 显然,三种方式所用的时间:
    innerHTML字符串拼接方式 >> createElement方式 > innerHTML数组方式
  2. 则三种方式的效率高低:
    innerHTML数组方式 > createElement方式 > innerHTML字符串拼接方式
  3. 可以根据实际情况需要,选择合适的方式
posted @ 2020-10-09 19:21  火星飞鸟  阅读(146)  评论(0编辑  收藏