概念
DocumentFragment 接口表示文档的一部分(或一段)。更确切地说,它表示一个或多个邻接的Document 节点和它们的所有子孙节点。
DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null。
不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作
说明
我们知道每执行一次DOM操作都会导致页面的重绘和重新排版,比如当进行循环批量插入节点时,每一次插入就会刷新一次DOM树,严重影响页面性能。
这时候我们可以选择使用DocumentFragment来临时保存要插入的所有节点,循环完成后再插入到主文档里边,这样就只需要修改一次DOM树。
代码
var fragment = document.createDocumentFragment();
for (let i = 0;i<10;i++){
let node = document.createElement("p");
node.innerHTML = i;
fragment.appendChild(node);
}
document.body.appendChild(fragment);