使用DocumentFragment加快DOM渲染速度

js中提供了一个DocumentFragment机制,可以提供一个缓冲机制,将DOM节点先放在内存中,当节点都构造完成后,再将DocumentFragment对象添加到页面中,这时所有的节点都会一次渲染出来,这样就能减少浏览器很多的负担,明显的提高页面渲染速度。下面的代码给出了两个函数,分别是用普通DOM方法和DocumentFragment两种方式向页面添加一万个div节点,使用第二种方式比第一种快很多。

function CreateNodes(){ 
    for(var i = 0;i < 10000;i++){
        var tmpNode = document.createElement("div");
        tmpNode.innerHTML = "test" + i + " <br />";
        document.body.appendChild(tmpNode);      
    }
}

function CreateFragments(){
    var fragment = document.createDocumentFragment();
    for(var i = 0;i < 10000;i++){
        var tmpNode = document.createElement("div");
        tmpNode.innerHTML = "test" + i + "<br />";
        fragment.appendChild(tmpNode);
    }
    document.body.appendChild(fragment);
}