DOM DocumentFragment对象

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>

效果图：