innerHTML与document.createElement性能对比

动态创建元素的方式：

• document.write()或document.writeln();
• document.createElement();
• ele.innerHTML;

document.write(string);
/**
 *  若是在页面加载完成后，执行document.write()方法，会覆盖页面内容。
 *  很少使用到
 */

• innerHTML性能问题：
  • 不推荐innerHTML在循环中使用，每一次循环，文档DOM树会重新绘制。
  • 不推荐字符串大量拼接，字符串不可变，每一次字符串拼接会开辟新的内存空间，产生垃圾。
  • 使用数组尽可能的解决innerHTML性能问题。
  • 对于纯文本内容，推荐使用innerText。

<!-- innerHTML在循环中使用，造成严重性能问题 -->
<input type="button" value="按钮" id="btn">
<div id="box"></div>
<script>
    var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];
    $id('btn').onclick = function() {
        var box = $id('box');
        box.innerHTML = '<ul>';//重新绘制DOM树,消耗时间
        for (var i = 0, len = datas.length; i < len; i++) {
            box.innerHTML += '<li>' + datas[i] + '</li>');//重新绘制DOM树，消耗时间
        }
        box.innerHTML += '</ul>';//重新绘制DOM树，消耗时间
    };
    /**
     * 根据元素id获取元素
     * @param  {[string]} id [元素id]
     * @return {[dom]}    [元素]
     */
    function $id(id) {
        return document.getElementById(id);
    }
</script>

<!-- 字符串大量拼接，造成严重性能问题 -->
<input type="button" value="按钮" id="btn">
<div id="box"></div>
<script>
    var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];
    $id('btn').onclick = function() {
        var box = $id('box');
        var html = '<ul>';
        for (var i = 0, len = datas.length; i < len; i++) {
            html += '<li>' + datas[i] + '</li>');//字符串不可变，重新开辟新的内存，产生垃圾,消耗时间
        }
        html += '</ul>';
        box.innerHTML = html;//重新绘制DOM树
    };
    /**
     * 根据元素id获取元素
     * @param  {[string]} id [元素id]
     * @return {[dom]}    [元素]
     */
    function $id(id) {
        return document.getElementById(id);
    }
</script>

<!-- 使用数组替代字符串拼接，尽可能解决字符串拼接性能问题 -->
<input type="button" value="按钮" id="btn">
<div id="box"></div>
<script>
    var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];
    $id('btn').onclick = function() {
        var box = $id('box');
        var arr = [];
        arr.push('<ul>');
        for (var i = 0, len = datas.length; i < len; i++) {
            arr.push('<li>' + datas[i] + '</li>');
        }
        arr.push('</ul>');
        box.innerHTML = arr.join('');//重新绘制DOM树
    };
    /**
     * 根据元素id获取元素
     * @param  {[string]} id [元素id]
     * @return {[dom]}    [元素]
     */
    function $id(id) {
        return document.getElementById(id);
    }
</script>

• document.createElement(string);//推荐

// 在内存中创建一个DOM对象
var div = document.createElement('div');
// 把DOM对象放到DOM树上，重新绘制DOM树
parentEle.appendChild(div);

<input type="button" value="按钮" id="btn">
<div id="box"></div>
<script>
    var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];
    $id('btn').onclick = function() {
        var box = $id('box');
        var ul = document.createElement('ul'); //在内存中动态创建ul元素
        box.appendChild(ul); //把ul元素放到DOM树上，会重新绘制DOM树
        for (var i = 0, len = datas.length; i < len; i++) {
            var li = document.createElement('li');//在内存中动态创建li元素
            li.innerText = datas[i];//设置li元素显示的内容，innerText在老版本Firefox不兼容
            ul.appendChild(li);//把li元素放到DOM树上，会重新绘制DOm树
        }
    };
    /**
     * 根据元素id获取元素
     * @param  {[string]} id [元素id]
     * @return {[dom]}    [元素]
     */
    function $id(id) {
        return document.getElementById(id);
    }
</script>

• 不推荐在循环中编写函数体，每循环一次就会在内存中存储一个函数体。

innerHTML和document.createElement(tagName)对比

• innerHTML

  • innerHTML，会对字符串进行解析，每次动态添加元素都会重新绘制DOM树。
  • 使用数组解决字符串大量拼接性能问题。(优化后性能接近于document.createElement())
  • 适合于简单数据的解析。
  • 不利于代码维护。

• document.createElement(tagName)

  • 在内存中创建元素，当将元素添加到DOM树上时，会重新绘制DOM树。
  • 适合于复杂数据的解析。
  • 有利于代码维护。