利用documentFragment优化DOM操作

createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。将要添加的节点一次性放入节点碎片中，然后进行一次DOM操作添加节点即可。

优化前：

<div id="wrap">div>
   <script>
       let wrap = document.getElementById("wrap");
       for(let i = 0; i < 10; i++){
           let li = document.createElement("li");
           let text = document.createTextNode("hello" + i);
           li.appendChild(text);
           wrap.appendChild(li);
       }
   script>

优化后：

<div id="wrap">div>
    <script>
        let wrap = document.getElementById("wrap");
        let documentFragment = document.createDocumentFragment();
        for(let i = 0; i < 10; i++){
            let li = document.createElement("li");
            let text = document.createTextNode("hello" + i);
            li.appendChild(text);
            documentFragment.appendChild(li);
        }
        wrap.appendChild(documentFragment);
    script>