所有节点类型中，DocumentFragment 类型是唯一一个标记中没有对应的类型。

  • nodeType = 11
  • nodeName = “#document-fragment”
  • nodeValue = null
  • parentNode = null
  • 子节点
    • Element / ProcessingInstruction / Comment / Text / CDATASection / EntityReference

**DocumentFragment**，文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 [Document](https://developer.mozilla.org/zh-CN/docs/Web/API/Document) 使用，就像标准的 document 一样，存储由节点（nodes）组成的文档结构。

与 document 相比，最大的区别是 DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染 （阻止回流），且不会导致性能等问题。

创建

document.createDocumentFragment();

  1. const list = document.querySelector('#list');
  2. const fruits = ['Apple', 'Orange', 'Banana', 'Melon'];
  4. const fragment = document.createDocumentFragment();
  6. fruits.forEach(fruit => {
  7.   const li = document.createElement('li');
  8.   li.innerHTML = fruit;
  9.   fragment.appendChild(li);
  10. });
  12. list.appendChild(fragment);

使用字符串也能阻止回流并且性能最高，

  1. var oUl = document.getElementById("list"),
  2.   list = "";
  4. for (var i = 0; i < 1000; i++) {
  5.   list += "<li>" + i + "</li>";
  6. }
  8. oUl.innerHTML = list;

但是文档片段相比字符吕对于开发者更方便及直观。