document.createDocumentFragment

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

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

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

比如下面這個示例，給一個ul添加10000個li，先用拼接字符串的方式來實現：

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 + '個子節點</li>'
}newUlEle.innerHTML = strconsole.log('耗時' + (Date.now() - start) + 'ms');

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

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

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

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

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