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. 可以根據實際情況需要，選擇合適的方式