Javascript documentFragment性能与未附加元素上的appendChild？

如果我用Javascript创建了很多DOM元素，那么将它们添加到documentFragment中，然后将片段添加到文档中，是否比将它们添加到一个独立的元素中，然后将该元素添加到DOM中提供了更好的性能？i、 e

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);

var-el；
var i=0；
var fragment=document.createDocumentFragment（）；
而（i<2000）{
el=document.createElement（'li'）；
el.innerText='这是我的列表项目编号'+i；
片段。附加子片段（el）；
i++；}
文件.附件（片段）；

vs

var-el；
var i=0；
var container=document.createElement（'div'）；
而（i<2000）{
el=document.createElement（'li'）；
el.innerText='这是我的列表项目编号'+i；
子容器（el）；
i++；}
文件.附件（容器）；

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

---

多亏了《第一原则》，我推测使用实际的包装器元素应该和DocumentFragment一样快，甚至稍微快一点。这种加速是由于通知突变观察者所需的工作量减少，并且必须将单个节点附加到子列表中，而不是解包片段并将其所有子节点移动到列表中。它实际上取决于底层的数据结构。一个阵列比一个绳索结构有更高的惩罚

如果您想确定，您必须编写一个基准测试，并在所有主要浏览器上进行测试，并且随着新版本的发布（因为它们的实现发生了变化），偶尔会进行重新测试

---

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

我刚刚准确地测量了：

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")
}

这是chrome，firefox与之类似

---

我以为会是一样的。下一个问题是开销从何而来。

这个JSPerf有

DocumentFragment

明显优于

appendChild

，尽管

innerHTML

明显优于这两个：

---

2021年：再次测量。铬：f1=140ms f2=130ms。firefox:f1=90ms f2=90ms。是啊，火狐，干得好！看起来，对于创建未连接的dom子树来说，这并没有造成太大的影响。

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