innerHTML和createElement创建元素哪一个效率会更高？

如果你用innerHTML不采用字符串而是采用数组拼接（要放在数组里面，还要转换成字符串，结构稍微麻烦一些）的话，这时innerHTML的效率会更高一些，createElement的效率就会低一点点，只不过createElement的结构更加清晰。（先创建再叠加，很清楚）

总结：innerHTML（数组形式）比createElement效率更高一些。

innerHTML数组效率测试：

<script>
    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();
</script>

innerHTML拼接效率测试：

<script>
    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();
</script>

 createElement效率测试：

<script>
    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();
</script>