多个 DOM appendChild 的速度/效率答案

【问题标题】：Speed/efficiency of multiple DOM appendChild多个 DOM appendChild 的速度/效率
【发布时间】：2012-03-07 09:37:29
【问题描述】：

我必须一次性创建七个 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 是一个不错的选择？

谢谢:)

【问题讨论】：

如果你必须注释你的代码来解释你的函数参数是什么，那么你的命名很糟糕。
点了。我不需要命名它们，真的。原代码有全名，我在整理的时候就剪切粘贴了。顺便说一句，我不确定你是否会在 20 年后对此感到如此兴奋:)

标签： javascript appendchild

【解决方案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 插入变为只有 1 个。（任何涉及 DOM 的东西在 JavaScript 中都是 slow。）

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

【讨论】：

在.innerHTML 警察到达之前给我+1 ;-) 无论如何，我都会采用文档片段方法。
您应该补充一点，JS 中最慢的是 DOM 操作（不考虑重新渲染）。这就是为什么只添加一个节点会比七个节点快，即使它们更小。
感谢所有这一切，尤其是 jsPerf 领导。我一直想知道我最近如何对东西进行基准测试。感谢您的帮助:)
@MathiasBynens - 我无法让嵌套片段工作！我可以创建一个片段，添加子元素并将其添加到 DOM。但是如何将子代添加到片段内的子代中？
对于未来的任何人：我上一条评论中嵌套问题的答案在这里：stackoverflow.com/questions/9652420/… :)