DocumentFragment

DocumentFragment 是什么？

DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 应用，就像规范的 document 一样，存储由节点（nodes）组成的文档构造。与 document 相比，最大的区别是 DocumentFragment 不是实在 DOM 树的一部分，它的变动不会触发 DOM 树的从新渲染，且不会导致性能等问题。
———— MDN

应用场景

如果要在一个 ul 节点中一次性插入 10000 个 li 元素怎么办？

<ul id="parent">
  ...
</ul>

办法一

你可能第一个想到的办法，也是最简略的形式：

var parent = document.getElementById("parent");
for (var i = 0; i < 10000; i++) {var child = document.createElement("li");
  var text = document.createTextNode("" + i);
  child.appendChild(text);
  parent.appendChild(child);
}

不过家喻户晓的起因，对 DOM 重复操作会导致页面重绘、回流，效率非常低，而且页面可能会被卡死。

办法二

当然，更多能想到的形式应该是，先发明一个 div 节点，在内存中间接操作节点，而后把所有节点都凑在一起之后再跟 DOM 树进行交互，把所有节点都串在一个 div 上，而后再把 div 挂到 DOM 树上：

var parent = document.getElementById("parent");
var div = document.createElement("div");
for (var i = 0; i < 10000; i++) {var child = document.createElement("li");
  var text = document.createTextNode("" + i);
  child.appendChild(text);
  div.appendChild(child);
}
parent.appendChild(div);

只跟 DOM 树交互一次，性能方面必定是大有改善的，不过额定插入了一个 div，如果说不是跟 div 之类的节点进行交互呢，比方在 table 中插入 th、td？

办法三

这个时候，就到了 DocumentFragment 上场了，翻译过去就是文档片段的意思。

简略来说就是在内存中提供了一个 DOM 对象，当咱们须要频繁操作 DOM 的时候，能够在内存先中创立一个 DocumentFragment 文档片段，而后对这个文档片段中进行一系列频繁的 DOM 操作，当操作完结后直接插入实在的 DOM 节点中，这样所有的节点会被一次插入到实在的文档中，而这个操作仅产生一个重绘的操作。

能够当做是下面一个例子的不须要 div 直达版本，插入的时候，间接用其子元素替换其自身，十分完满。

var parent = document.getElementById("parent");
var frag = document.createDocumentFragment();
for (var i = 0; i < 10000; i++) {var child = document.createElement("li");
  var text = document.createTextNode("" + i);
  child.appendChild(text);
  frag.appendChild(child);
}
parent.appendChild(frag);

总结

当应对于频繁的 DOM 操作的场景，能够应用DocumentFragment。