前言
在编程的过程中,存在着真实dom,和虚拟dom，简单的理解写在html文件中的 标签都可以理解为真实dom，通过JavaScript动态创建的dom，然后再添加到页面中去就是虚拟dom，不管是真实dom还是虚拟dom，在JavaScript中一个dom对象包含着很多的数据，因此过分多次的操作dom会使页面的性能大大降低，因此在前端代码的优化中就有说到----->减少对dom的直接操作，因此JavaScript 中出现了一个函数 documentFragment
不多说直接上代码解释：
传统意义上的虚拟dom创建
1.假设我们需要动态创建五个 li 标签
<body>
<ul></ul>
<script>
for(let i = 0; i < 5; i++){
let text = document.createElement('li')
text.innerText = i
document.querySelector('ul').appendChild(text)
}
</script>
</body>
效果图：
image.png
此时我们不难发现这段代码对dom进行了5次操作，才将5个li添加到了ul 中，如果要是一百个一万个是不是就会大大影响页面性能，因此衍生出了documentFragment
通过documentFragment创建
<body>
<ul></ul>
<script>
let fragment = document.createDocumentFragment()
// 此时创建的是一个空的文档碎片
for(let i = 0; i < 5; i++){
let text = document.createElement('li')
text.innerText = i
fragment.appendChild(text)
}
// 转换伪数组
// let newArr = Array.prototype.slice.call(fragment.childNodes,1)
let newArr = Array.from(fragment.childNodes)
console.log(fragment.childNodes);
console.log(newArr);
document.querySelector('ul').appendChild(fragment)
</script>
</body>
效果图：
image.png
createDocumentFragment()方法，是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。
不难发现这种写法，我们只对dom进行了 一次操作，所存在的思想是，将虚拟dom（没挂载页面之前是保存在内存中）先放在文档碎片中，最后把文档碎片添加到页面中，此时只对dom进行了一次操作，大大的提升的页面的性能
