前端性能优化：DOM操作标签对性能的影响

给DOM添加相同的数量的字符串，到底什么会相应性能呢？

测试代码：

 var length = 300000;
    function Test1() {
        var t = [length];
        for (var i = 0; i < length; i++) {
            t.push("<br/>" + i.toString());
        }
        var date1 = new Date().getTime();
        document.getElementById("div1").innerHTML = t.join("");
        var date12 = new Date().getTime();
        console.log("1Test" + ((date12 - date1)));
    }
    function Test2() {

        var t = [length];
        for (var i = 0; i < length; i++) {
            t.push("bbrrr" + i.toString());
        }
        var date1 = new Date().getTime();
        document.getElementById("div2").innerHTML = t.join("");
        var date12 = new Date().getTime();
        console.log("2Test" + ((date12 - date1)));
    }

测试发现，同样的字符数量，就因为包含了大量的标签就导致了性能差异有六七倍，其实上如果在包含样式，类等，性能差异会更大。因此在创建标签时，没必要的标签就应该去掉，例如隐藏的，或者在需要时在添加必要的标签。

为什么会有这么大的差别呢？个人感觉是因为包含大量的标签，重新计算DOM树就需要花费大量的时间，然后渲染也需要大量的时间。