大家在使用javascript的时候，dom操作是最平常不过的了， 随着web前端技术的发展,我们越来越多的使用js来操作dom元素，比如通过ajax请求获取到数据，然后更新页面上的元素，一般情况下，这种操作我们会用类似node.appendchild()这中方式来完成。这个方法是无缓冲的，也就是说我们每次调用appendchild方法的时候，浏览器都会重新渲染页面。当然，使用这种方法也没有什么不行，因为我们在一般情况下都是对少量的dom节点进行更新，也并不会带来太大的性能问题，但是如果大量的更新dom节点，那么性能的差距就会越来越明显了。因为浏览器要不停的渲染页面，尤其是一些复杂的标签，大量的重新渲染非常消耗性能，影响用户体验。那么有什么好的方法能让这类dom操作的效率提高呢？
虽然我们平时在开发中遇到这样情况的时候并不多，但还是有必要了解一下，js中提供了一个documentfragment的机制，相信大家对这个并不陌生，它可以提供一个缓冲的机制，将dom节点先放到内存中，当节点都构造完成后，再将documentfragment对象添加到页面中，这时所有的节点都会一次渲染出来，这样就能减少浏览器很多的负担，明显的提高页面渲染速度。例如下面的代码：
复制代码 代码如下:
function createnodes(){
for(var i = 0;i var tmpnode = document.createelement(div);
tmpnode.innerhtml = test + i +
;
document.body.appendchild(tmpnode);
}
}
function createfragments(){
var fragment = document.createdocumentfragment();
for(var i = 0;i var tmpnode = document.createelement(div);
tmpnode.innerhtml = test + i +
;
fragment.appendchild(tmpnode);
}
document.body.appendchild(fragment);
}
上面的代码给出了两个函数，分别是用普通的dom方法和documentfragement两种方式向页面添加一万个div节点，大家可以自己实验一下，使用第二种方式要比第一种快很多。这里只是简单的div标签的平铺添加，如果是更加复杂的html标签或是多层的嵌套标签，那么性能的差距就会更加明显。
通过上面的例子，大家在开发javascript应用的时候，如果遇到这种大量节点的情况，不妨将documentfragment作为一个备选的方案。