- A+
所属分类：Web前端
前言：
在DOM节点操作中，innerTHML和createElement都可以实现创建元素。它们实现的功能类似，但是效率却相差很大。本文分别统计用innerTHML字符串拼接方式、innerTHML数组方式和createElement方式创建1000次元素的时间，来比较它们之间效率的高低。
比较思路：
- 使用new调用创建日期对象
- 完成1000次创建相同元素后的时间，减去创建之前的时间，即为过程所用的时间（单位：ms）
- 比较三种方式所用的时间
比较过程：
1. innerTHML字符串拼接方式
代码：
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. innerTHML数组方式
代码：
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次）
总结：
- 显然，三种方式所用的时间：
innerTHML字符串拼接方式 >> createElement方式 > innerTHML数组方式 - 则三种方式的效率高低：
innerTHML数组方式 > createElement方式 > innerTHML字符串拼接方式 - 可以根据实际情况需要，选择合适的方式
