document.createDocumentFragment

document.createDocumentFragment()方法創(chuàng)建一個(gè)新空白的DocumentFragment對(duì)象。

DocumentFragments是DOM節(jié)點(diǎn)。它們不是主DOM樹(shù)的一部分。通常的用例是創(chuàng)建文檔片段，將元素附加到文檔片段，然后將文檔片段附加到DOM樹(shù)。在DOM樹(shù)中，文檔片段被其所有的子元素代替。

因?yàn)槲臋n片段存在于內(nèi)存中，并不在DOM樹(shù)中，所以將子元素插入到文檔片段時(shí)不會(huì)引起頁(yè)面回流(reflow)(對(duì)元素位置和幾何上的計(jì)算)。因此，使用文檔片段document fragments 通常會(huì)起到優(yōu)化性能的作用。

比如下面這個(gè)示例，給一個(gè)ul添加10000個(gè)li，先用拼接字符串的方式來(lái)實(shí)現(xiàn)：

let start = Date.now() let str = '' let newUlEle = document.createElement('ul')document.body.appendChild(newUlEle)for (let i = 0; i < 10000; i++) {str += '<li>第' + i + '個(gè)子節(jié)點(diǎn)</li>' }newUlEle.innerHTML = strconsole.log('耗時(shí)' + (Date.now() - start) + 'ms');

多次刷新，可以看到創(chuàng)建10000個(gè)li時(shí)，渲染所需要的時(shí)間如下圖：

把上面的示例，換成append()的方式，逐個(gè)添加對(duì)應(yīng)的li：

let start = Date.now() let str = '' let newUlEle = document.createElement('ul')document.body.appendChild(newUlEle)for (let i = 0; i < 10000; i++) {let liEle = document.createElement('li')liEle.textContent = '第' + i + '個(gè)子節(jié)點(diǎn)'newUlEle.appendChild(liEle) }console.log('耗時(shí)：' + (Date.now() - start) + 'ms')

這種方法所費(fèi)時(shí)間如下圖：

都說(shuō)第二種方法要比第一種方法耗時(shí)，看上去有點(diǎn)像。接下來(lái)再來(lái)看createDocumentFragment的方法。可以預(yù)見(jiàn)的是，這種方法肯定比第二種強(qiáng)，但應(yīng)該沒(méi)有第一種快：

let start = Date.now() let str = '' let newUlEle = document.createElement('ul')document.body.appendChild(newUlEle)let fragment = document.createDocumentFragment()for (let i = 0; i < 10000; i++) {let liEle = document.createElement('li')liEle.textContent = '第' + i + '個(gè)子節(jié)點(diǎn)'fragment.appendChild(liEle) }newUlEle.appendChild(fragment)console.log('耗時(shí)：' + (Date.now() - start) + 'ms')

總結(jié)

以上是生活随笔為你收集整理的document.createDocumentFragment 以及创建节点速度比较的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。