DocumentFragment

DocumentFragment接口可以用来做dom级别的性能优化

介绍

DocumentFragment 接口表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document 使用,用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为DocumentFragment不是真实DOM树的一部分,它的变化不会引起DOM树的重新渲染的操作(reflow) ,且不会导致性能等问题。

如何使用

常见的使用方法是创建一个DocumentFragment 对象,在对象中组装一个DOM子树,然后使用Node对象(例如document.body)的appendChild或者insertBefore方法将该片段附加或插入到DOM中。

这种情况下被添加(append)或者被插入( inserted)的是DocumentFragment 对象的所有子节点,而非DocumentFragment 对象本身,DocumentFragment 对象变成空白DocumentFragment 对象。

这使得DocumentFragment 对象成了有用的占位符,暂时存放那些一次插入document的节点,有利于实现document的剪切、复制、粘贴操作。

因为所有的节点会被一次插入到document中,而这个操作仅发生一个重渲染的操作,而不是每个节点分别被插入到文档中(会发生多次重渲染的操作)。

const frag = document.createDocumentFragment()
for (let i = 0; i < 100; i++) {
const op = document.createElement('P')
const oText = document.createTextNode(i)
op.appendChild(oText)
frag.appendChild(op)
}
document.body.appendChild(frag)

当DocumentFragment 对象插入完会自动销毁DocumentFragment 对象的内容

移除DOM到DocumentFragment对象中

如果将document中的节点添加到DocumentFragment对象中,就会从document中移除该节点,也不会从浏览器中看到该节点,添加到DocumentFragment对象的新节点也不属于DOM树

<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<script type="text/javascript">
var frag=document.createDocumentFragment();
var ul = document.getElementsByTagName('ul')[0]
console.log(ul)
frag.appendChild(ul)
</script>
</body>
</html>

把DOM树中的ul节点添加到文档碎片中,这时dom树中的ul节点也消失了,存放在DocumentFragment对象中了,所有的操作不会重渲染dom树