document.createDocumentFragment 以及创建节点速度比较

Dear 丶 2021-09-15 08:48 322阅读 0赞

#### `document.createDocumentFragment` ####

`document.createDocumentFragment()`方法创建一个新空白的`DocumentFragment`对象。

[`DocumentFragments`][DocumentFragments]是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素代替。

因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面[回流][Link 1](`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 = str
    
    console.log('耗时' + (Date.now() - start) + 'ms');

多次刷新，可以看到创建`10000`个`li`时，渲染所需要的时间如下图：

![dom-operate-1.png][]

把上面的示例，换成`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')

这种方法所费时间如下图：

![dom-operate-2.png][]

都说第二种方法要比第一种方法耗时，看上去有点像。接下来再来看`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')

![dom-operate-3.png][]

[DocumentFragments]: https://developer.mozilla.org/en-US/docs/DOM/DocumentFragment
[Link 1]: https://code.google.com/speed/articles/reflow.html
[dom-operate-1.png]: /images/20210813/aaaf46becd9049bb90c0cabedad4d5b6.png
[dom-operate-2.png]: /images/20210813/812146735537436780f6c11a8085b484.png
[dom-operate-3.png]: /images/20210813/e81b09b8decc498eb408d4ac72148fd1.png