javascript - 多个 DOM appendChild 的速度/效率

Question

我必须一次创建七个 div 元素 - 包含 A1、A2、A3 和 A4 的容器 A，然后是 A2 中的 A2a 和 A2b。我正在多次调用这个小函数:

function u1(t,i,c,p){ // type,id,class_name,parent_id
    var tag=document.createElement(t); // Create node to be appended
    tag.id=i;
    tag.className=c;
    document.getElementById(p).appendChild(tag);
}

我的问题:是否有一种更省时的方法将这七个捆绑在一起，然后只执行一个 DOM 追加？还是 innerHTML 是一个不错的选择？

谢谢:)

Answer 1

你可以只使用 .innerHTML。另一种方法是使用文档片段:

var fragment = document.createDocumentFragment();

function u1(t, i, c){ // type,id,class_name
    var tag = document.createElement(t); // Create node to be appended
    tag.id = i;
    tag.className = c;
    fragment.appendChild(tag); // will use `fragment` from the outer scope
}

// call u1() seven times

// then insert all the elements into the DOM all at once
document.getElementById('foo').appendChild(fragment);

文档片段创建起来有点慢，但从长远来看可以节省性能。例如，在这种情况下，您从 7 个 DOM 插入变成了一个。 (任何涉及 DOM 的东西在 JavaScript 中都是慢。)

如果您想使用这两种方法对您的特定用例进行基准测试，create a jsPerf test case .