JavaScript Tips - 使用DocumentFragment加快DOM渲染速度

　　大家在使用JavaScript的时候，DOM操作是最平常不过的了， 随着Web前端技术的发展,我们越来越多的使用JS来操作DOM元素，比如通过ajax请求获取到数据，然后更新页面上的元素，一般情况下，这种操作我们会用类似node.appendChild()这中方式来完成。这个方法是无缓冲的，也就是说我们每次调用appendChild方法的时候，浏览器都会重新渲染页面。当然，使用这种方法也没有什么不行，因为我们在一般情况下都是对少量的DOM节点进行更新，也并不会带来太大的性能问题，但是如果大量的更新DOM节点，那么性能的差距就会越来越明显了。因为浏览器要不停的渲染页面，尤其是一些复杂的标签，大量的重新渲染非常消耗性能，影响用户体验。那么有什么好的方法能让这类DOM操作的效率提高呢？

 

　　虽然我们平时在开发中遇到这样情况的时候并不多，但还是有必要了解一下，JS中提供了一个DocumentFragment的机制，相信大家对这个并不陌生，它可以提供一个缓冲的机制，将DOM节点先放到内存中，当节点都构造完成后，再将DocumentFragment对象添加到页面中，这时所有的节点都会一次渲染出来，这样就能减少浏览器很多的负担，明显的提高页面渲染速度。例如下面的代码：

 

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);
}

 

 

　　上面的代码给出了两个函数，分别是用普通的DOM方法和DocumentFragement两种方式向页面添加一万个div节点，大家可以自己实验一下，使用第二种方式要比第一种快很多。这里只是简单的div标签的平铺添加，如果是更加复杂的HTML标签或是多层的嵌套标签，那么性能的差距就会更加明显。

　　通过上面的例子，大家在开发JavaScript应用的时候，如果遇到这种大量节点的情况，不妨将DocumentFragment作为一个备选的方案。