createDocumentFragment

createDocumentFragment是一块内存,不属性dom,可以把要添加的node放到这个内存里面,然后统一appendChild可以提高效率

        //普通的作法
        var ul = document.querySelector("ul");
        for (var i = 0; i < 20000; i++) {
            var li = document.createElement("li");
            li.innerHTML = "index: " + i;
            ul.appendChild(li);
        }


        //createDocumentFragment
        var ul = document.querySelector("ul");
        var fragment = document.createDocumentFragment();
        for (var i = 0; i < 20000; i++) {
            var li = document.createElement("li");
            li.innerHTML = "index: " + i;
            fragment.appendChild(li);
        }

        ul.appendChild(fragment);