javascript DocumentFragment文档碎片

概念：
DOM 将 文档片段定义为“轻量级”文档，能够包含和操作节点，却没有完整文档那样额外的消耗。文档片段的作用是充当其他要被添加到文档的节点的仓库。简单说，文档碎片不属于DOM树，对其进行操作不会对DOM树进行重新渲染。因此我们可以把许多子节点添加进文档片段。最后把文档片段一次性添加进DOM树。
操作步骤：
1.使用 var fragment = document.createDocumentFragment()方法创建文档片段
2.通过 appendChild(fragment)或 insertBefore(fragment)方法将文档片段的内容添加到文档。在把文档片段作为参数传给这些方法时，这个文档片段的所有子节点会被添 加到文档中相应的位置。文档片段本身永远不会被添加到文档树。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    var ul = document.querySelector('ul')
    var fragment = document.createDocumentFragment()
    for (var i = 0; i < 5; i++) {
        var li = document.createElement('li')
        li.innerHTML = `我是li`
        fragment.appendChild(li)
    }
    ul.appendChild(fragment)
    //fragment并不属于DOM树
    console.log(document.fragment);  //undefined

注意：
如果文档中的一个 节点被添加到一个文档片段，则该节点会从文档树中移除，不会再被浏览器渲染。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    var ul = document.querySelector('ul')
    var span = document.createElement('span')
    span.innerHTML = '我是span'
    //这时span还属于DOM树
    ul.appendChild(span)

    //把span添加到文档碎片中，span就会离开DOM树
    var fragment = document.createDocumentFragment()
    fragment.appendChild(span)