前端性能优化：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树就需要花费大量的时间，然后渲染也需要大量的时间。

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

标签：

原文地址：http://blog.csdn.net/xuexiaodong009/article/details/51810664