虚拟DOM之documentFragment

前言

在编程的过程中,存在着真实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进行了一次操作，大大的提升的页面的性能