[DOM][document][进阶]DocumentFragment, document.createDocumentFragment()

vue源码学习双向数据绑定原理前置知识

DocumentFragment

DocumentFragment（文档片段）是12中节点类型之一（《JavaScript高级程序设计》第275——276页）
DOM规定文档片段是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外资源。
虽然不能把文档片段直接添加到文档中，但可以将它作为一个“仓库”来使用，即可以再里面保存将来可能会添加到文档中的节点。
创建文档片段，使用document.createDocumentFragment()方法
DocumentFragment的变化不会触发DOM树的重新渲染，且不会导致性能等问题。

文档片段继承了Node的所有方法，通常用于执行那些针对文档的DOM操作。如果将文档中的节点添加到文档片段中，就会从文档树中移除该节点，也不会从浏览器中再看到该节点。
添加到文档片段中的新节点同样也不属于文档树。可以通过appendChild()或insertBefore()将文档片段中的内容添加到文档中。在将文档片段作为参数传递给这两个方法时，
实际上只会将文档片段的所有子节点添加到相应位置上；
文档片段本身永远不会成文档树的一部分。

<ul id="myList"></ul>

 var fragment = document.createDocumentFragment();
 var ul = document.getElementById('myList');
 var browsers = ['Chrome','FireFox','Opera','Safari','Internet Explorer'];
 browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
 })
 ul.appendChild(fragment)