多个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是一个好的选择？

谢谢 :)

- Nick

---

如果你不得不通过注释来解释函数参数的含义，那么这些参数的命名可能不够好。 - Anthony Grist

明白了。其实我不需要给它们命名。原始代码已经有全名了，我只是在整理时剪切和粘贴。顺便说一句，我不确定20年后你是否还会对此感到如此兴奋 :) - Nick

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

文档片段创建速度较慢，但从长远来看可以提高性能。例如，在此情况下，您只需进行一次DOM插入，而不是7次。（在JavaScript中，任何涉及DOM的操作都很慢）

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

- Mathias Bynens

---

在 ".innerHTML" 警察到来之前，我会点赞你的建议；-) 无论如何，我会采用文档片段的方法。 - Andy E

你应该指出在JS中最慢的是DOM操作（不考虑重新渲染）。这就是为什么即使它们更小，添加一个节点也比添加七个节点快的原因。 - Florian Margaine

谢谢你提供的所有帮助，特别是jsPerf的领导。我最近一直想知道如何对一些东西进行基准测试。我很感激你的帮助 :) - Nick

@MathiasBynens - 我无法让嵌套片段起作用！我可以创建一个片段，附加子元素并将其添加到DOM中。但是如何向片段内的子元素添加子元素？ - Nick

未来的任何人：我上次评论中关于嵌套问题的答案在这里：https://dev59.com/n2HVa4cB1Zd3GeqPmWVX :) - Nick

对于那些感兴趣的人，请查看测试用例：http://jsperf.com/innerhtml-rdc2。片段轻松获胜。 - Nick