DocumentFragment对象

在动态创建html元素一般都是直接appendChild()上去的，这样就产生了回流和重绘，如果在大量操作DOM时，那就会严重影响性能，这样的话，我没就可以把DOM离线操作：

https://www.cnblogs.com/houfee/p/9837777.html

所以需要一个'缓存区'来保存创建的节点，然后再一次性添加到父节点中。这时候DocumentFragment对象就派上用场了。

W3C说明:

DocumentFragment 接口表示一个或多个邻接的 Document 节点和它们的所有子孙节点。

DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。

不过它有一种特殊的行为，该行为使得它非常有用，即当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作，尤其是与 Range 接口一起使用时更是如此。

可以用 Document.createDocumentFragment() 方法创建新的空 DocumentFragment 节点。

var fragment = document.createDocumentFragment();

案例：

 

<div id="one"></div>

  <div id="two"></div>
  <script type="text/javascript">
    function time1() {
      var pNode, fragment = document.createDocumentFragment();
      for (var i = 0; i < 20000; i++) {
        pNode = document.createElement('p');
        pNode.innerHTML = i;
        fragment.appendChild(pNode);
      }
      document.getElementById("one").appendChild(fragment);
    }

    function time2() {
      for (var i = 0; i < 20000; i++) {
        p = document.createElement('p');
        p.innerHTML = i;
        document.getElementById("two").appendChild(p);
      }
    }

    console.time(1); //设置时间起点
    time1();
    console.timeEnd(1);

    console.time(2); //设置时间起点
    time2();
    console.timeEnd(2);
  </script>