document.createDocumentFragment

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

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

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

比如下面這個示例，給一個ul添加10000個li，先用拼接字符串的方式來實現(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 + '個子節(jié)點</li>' }newUlEle.innerHTML = strconsole.log('耗時' + (Date.now() - start) + 'ms');

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

把上面的示例，換成append()的方式，逐個添加對應(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 + '個子節(jié)點'newUlEle.appendChild(liEle) }console.log('耗時：' + (Date.now() - start) + 'ms')

這種方法所費時間如下圖：

都說第二種方法要比第一種方法耗時，看上去有點像。接下來再來看createDocumentFragment的方法。可以預(yù)見的是，這種方法肯定比第二種強，但應(yīng)該沒有第一種快：

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 + '個子節(jié)點'fragment.appendChild(liEle) }newUlEle.appendChild(fragment)console.log('耗時：' + (Date.now() - start) + 'ms')

總結(jié)

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

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