多个DOM appendChild的速度/效率

Question

我必须在一个命中创建七个div元素 - 容器A包含A1,A2,A3和A4,然后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插入.(任何涉及DOM的东西在JavaScript中都很慢.)

如果要使用这两种方法对特定用例进行基准测试,请创建一个jsPerf测试用例.