Question

如果我使用Javascript创建了很多DOM元素，是否将它们添加到documentFragment然后将片段添加到文档中，提供的性能比将其添加到 unattached <更好/ strong>元素然后将该元素添加到DOM？即。

var el; var i = 0; var fragment = document.createDocumentFragment(); while (i < 2000) { el = document.createElement('li'); el.innerText = 'This is my list item number ' + i; fragment.appendChild(el); i++; } document.appendChild(fragment);

VS

var el; var i = 0; var container = document.createElement('div'); while (i < 2000) { el = document.createElement('li'); el.innerText = 'This is my list item number ' + i; container.appendChild(el); i++; } document.appendChild(container);

（注意：这只是一个简化的例子，在我的实际代码中我添加了许多表行和表元素。）

由于

Answer 1

我只是精确地测量了这一点：

function f1(){
    console.time("f1")
    let e = document.createElement("div")
    for(let i=0; i < 100000; i++){
        let a = document.createElement("a")
        e.appendChild(a)
    }
    console.timeEnd("f1")
}

function f2(){
    console.time("f2")
    let e = document.createDocumentFragment()
    for(let i=0; i < 100000; i++){
        let a = document.createElement("a")
        e.appendChild(a)
    }
    console.timeEnd()
    console.timeEnd("f2")
}

文档碎片处理相对更快：

f1: 494.0458984375ms      
f2: 346.35009765625ms

这是chrome，firefox也很相似。

我认为会是一样的。下一个问题是间接费用来自哪里。

Answer 2

从第一原则开始，我推测使用实际的包装元素应该比DocumentFragment快，甚至快一点。加速将由于通知变异观察者所需的工作量减少以及必须附加到子列表的单个节点而不是解压缩片段并将其所有子节点移动到列表中。它实际上取决于基础数据结构。数组比绳索结构具有更高的阴谋度。

如果你想确定你必须编写一个基准测试并在所有主流浏览器上进行测试，并且随着新版本的实现发生变化，偶尔会重新测试。

嗯，你实际上甚至没有声明你正在使用浏览器。还有其他DOM实现。

Answer 3

尽管DocumentFragment击败了appendChild，但这个JSPerf大大击败了innerHTML：

https://jsperf.com/appendchild-vs-documentfragment-vs-innerhtml/24

documentFragment性能与appendChild在unattached元素上？

3 个答案: