文档片段

DocumentFragment 类型节点在文档书没有对应的标记。 DOM 允许用户操作 JavaScript 文档片段中的节点，但不会在文档树中显现出来，避免浏览器渲染和占用资源。

• nodeType 值为 5
• nodeName 值为 "#document-fragment"
• nodeValue 值为 null
• parentNode 值为 null
• 子节点可以是 Element 、 ProcessingInstruction 、 Comment 、 Text 、 CDATASection 、 EntityReference

使用

DocumentFragment 是一个虚拟的节点类型，仅存在于内存中，没有添加到文档树，所以在网页中看不到渲染效果。使用文档树的好处就是避免浏览器渲染占用资源。当文档片段设计完善后，再使用 JavaScript 一次性添加到文档树显示出来，这样可以提高效率。

主要特征值： nodeType 的值为 11 、 nodeName 的值为 "#document0fragment"、 nodeValue 等于 null 、 parentNode 等于 null 。

var fragment = document.createDocumentFragment();

使用 appendChild() 或 insertBefore() 可以将文档片段添加到文档树。

每次使用 JavaScript 操作 DOM ，都会改变页面呈现，并触发整个页面的重新渲染（回流），从而消耗系统资源。为解决这个问题，把所有的新节点都附加到文档片段上，然后再把文档片段一次性添加到文档中，以减少页面的重绘次数。

var element = document.getElementById('ul');
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);