前言
在編程的過程中,存在著真實(shí)dom,和虛擬dom，簡(jiǎn)單的理解寫在html文件中的 標(biāo)簽都可以理解為真實(shí)dom，通過JavaScript動(dòng)態(tài)創(chuàng)建的dom，然后再添加到頁面中去就是虛擬dom，不管是真實(shí)dom還是虛擬dom，在JavaScript中一個(gè)dom對(duì)象包含著很多的數(shù)據(jù)，因此過分多次的操作dom會(huì)使頁面的性能大大降低，因此在前端代碼的優(yōu)化中就有說到----->減少對(duì)dom的直接操作，因此JavaScript 中出現(xiàn)了一個(gè)函數(shù) documentFragment
不多說直接上代碼解釋：
傳統(tǒng)意義上的虛擬dom創(chuàng)建
1.假設(shè)我們需要?jiǎng)討B(tài)創(chuàng)建五個(gè) li 標(biāo)簽
<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>
效果圖：
此時(shí)我們不難發(fā)現(xiàn)這段代碼對(duì)dom進(jìn)行了5次操作，才將5個(gè)li添加到了ul 中，如果要是一百個(gè)一萬個(gè)是不是就會(huì)大大影響頁面性能，因此衍生出了documentFragment
通過documentFragment創(chuàng)建
<body>
<ul></ul>
<script>
let fragment = document.createDocumentFragment()
// 此時(shí)創(chuàng)建的是一個(gè)空的文檔碎片
for(let i = 0; i < 5; i++){
let text = document.createElement('li')
text.innerText = i
fragment.appendChild(text)
}
// 轉(zhuǎn)換偽數(shù)組
// 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>
效果圖：
createDocumentFragment()方法，是用來創(chuàng)建一個(gè)虛擬的節(jié)點(diǎn)對(duì)象，或者說，是用來創(chuàng)建文檔碎片節(jié)點(diǎn)。它可以包含各種類型的節(jié)點(diǎn)，在創(chuàng)建之初是空的。
不難發(fā)現(xiàn)這種寫法，我們只對(duì)dom進(jìn)行了 一次操作，所存在的思想是，將虛擬dom（沒掛載頁面之前是保存在內(nèi)存中）先放在文檔碎片中，最后把文檔碎片添加到頁面中，此時(shí)只對(duì)dom進(jìn)行了一次操作，大大的提升的頁面的性能
