为什么会有这么个类型？

  1. var oUl = document.getElementsByTagName('ul')[0];
  2. for (let i = 0; i < 10; i++) {
  3.   oLi = document.createElement('li');
  4.   oLi.innerText = i;
  5.   oUl.appendChild(oLi);
  6. }

？上述代码有一个问题就是每次循环，都会使得DOM树重新渲染，如果循环10000次，会极大的影响浏览器的性能。
解决方案：创建一个与真实DOM结构无关的文档片段，在这个文档片段里可以存储、操作节点。完成后直接插入到DOM结构中，浏览器只需渲染一次。

DocumentFragment类是什么？

它继承自Node类，可以使用Node类里的属性和方法。相当于创建了节点的仓库。

  1. var oUl = document.getElementsByTagName('ul')[0];
  2. var frag = document.createDocumentFragment();
  3. for (let i = 0; i < 10; i++) {
  4.   oLi = document.createElement('li');
  5.   oLi.innerText = i;
  6.   frag.appendChild(oLi);
  7. }
  8. oUl.appendChild(frag);