Document​.create​Document​Fragment()文档片段节点

在所有节点类型中，只有文档片段节点DocumentFragment在文档中没有对应的标记。DocumentFragments是DOM节点，通常的用例是创建文档片段，将多个元素附加到文档片段，然后将文档片段附加到DOM树。

因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

Document​.create​Document​Fragment()语法

let fragment = document.createDocumentFragment();

创建文档片段，要使用document.createDocumentFragment()方法。文档片段继承了Node的所有方法，通常用于执行那些针对文档的DOM操作。
文档片段节点的三个node属性——nodeType、nodeName、nodeValue分别是11、'#document-fragment'和null，文档片段节点没有父节点parentNode，所有父节点parentNode为null。

var frag = document.createDocumentFragment();
console.log(frag.nodeType);//11
console.log(frag.nodeValue);//null
console.log(frag.nodeName);//'#document-fragment'
console.log(frag.parentNode);//null

Document​.create​Document​Fragment()作用

我们经常使用javascript来操作DOM元素，比如使用appendChild()方法。每次调用该方法时，浏览器都会重新渲染页面。如果大量的更新DOM节点，则会非常消耗性能，影响用户体验。javascript提供了一个文档片段DocumentFragment的机制。如果将文档中的节点添加到文档片段中，就会从文档树中移除该节点。把所有要构造的节点都放在文档片段中执行，这样可以不影响文档树，也就不会造成页面渲染。当节点都构造完成后，再将文档片段对象添加到页面中，这时所有的节点都会一次性渲染出来，这样就能减少浏览器负担，提高页面渲染速度。

var element  = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera', 
    'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

element.appendChild(fragment);