javascript – documentFragment性能与appendChild在unattached元素上？

2019年7月28日 151次阅读

如果我用
Javascript创建了很多DOM元素,是否将它们添加到documentFragment然后将片段添加到文档中,提供比将它们添加到未附加元素然后将该元素添加到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);

与

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

(注意：这只是一个简化的例子,在我的实际代码中我添加了许多表行和表元素.)

谢谢

最佳答案 我刚刚测量到了这一点：

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

documentfragment相关性更快：

f1: 494.0458984375ms      
f2: 346.35009765625ms

这是chrome,firefox是类似的.

我以为会是一样的.下一个问题是开销来自哪里.

点赞