多DOM appendChild的速度/效率

Speed/efficiency of multiple DOM appendChild

本文关键字：效率 速度 DOM appendChild      更新时间：2023-09-26

我必须在一个命中容器A中创建七个div元素，其中包含A1、A2、A3&A4，然后是A2a&A2中的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是一个不错的选择？

感谢：）

您可以只使用.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中都是慢。）

如果您想使用这两种方法对特定用例进行基准测试，请创建一个jsPerf测试用例。

相关文章：