DocumentFragment对象
一、应用场景
动态创建html元素:创建好之后直接使用appendChild()方法添加至DOM结构中
注: 但是当需要创建并添加大量的元素时,这样去动态创建元素的话会导致大量的重绘以及回流,所以需要一个 ‘缓存区’ 来暂时性的保存创建的节点,然后再一次性添加到父节点中。这时,DocumentFragment对象就作为这个缓存区被使用。
最常用的方法是使用文档片段(DocumentFragment)作为参数(例如,任何 Node 接口类似 Node.appendChild 和 Node.insertBefore) 的方法),这种情况下被添加(append)或被插入(inserted)的是片段的所有子节点, 而非片段本身。因为所有的节点会被一次插入到文档中,而这个操作仅发生一个重渲染的操作,而不是每个节点分别被插入到文档中,因为后者会发生多次重渲染的操作。
二、w3c官方说明
DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null。
不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。
重点就在于DocumentFragment 节点不属于文档树。因此当把创建的节点添加到该对象时,并不会导致页面的回流,因此性能就自然上去了。
三、创建DocumentFragment
var fragment = document.createDocumentFragment();
<script>
var fragment = document.createDocumentFragment();
var pNode;
for(var i=1; i<=50; i++){
pNode = document.createElement('span');
pNode.innerText = i + ",";
fragment.appendChild(pNode);
}
document.body.appendChild(fragment);
</script>
效果图: