|
|
虽然我们平时在开发中遇到这样情况的时候并不多，但还是有必要了解一下，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作为一个备选的方案。
JavaScript技术：JavaScript Tips 使用DocumentFragment加快DOM渲染速度，转载需保留来源！
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
