Javascript HTML/性能：处理大规模动态DOM插入

我有464个JSON对象。HTML元素需要从这些元素中的每一个生成，并按顺序插入到div中。渲染这个的最快方法是什么

A） 循环遍历对象，为每个对象生成标记，将它们全部连接起来，并将容器的

div

设置为连接的标记：

document.getElementById("container").innerHTML = 
    jsonItems.map(function(item) {
        return convertToHTMLString(item);
    }).join("");

B） 循环遍历对象，为每个对象生成一个DOM节点，并按顺序将每个对象插入到容器中：

var container = document.getElementById("container");

jsonItems.forEach(function(item) {
    container.appendChild(convertToDOMNode(item));
});

var fragment = document.createDocumentFragment();

jsonItems.forEach(function(item) {
    fragment.appendChild(convertToDOMNode(item));
});

document.getElementById("container").appendChild(fragment);

C） 循环遍历对象，为每个对象生成一个DOM节点，依次将它们附加到

DocumentFragment

，然后将片段插入容器中：

var container = document.getElementById("container");

jsonItems.forEach(function(item) {
    container.appendChild(convertToDOMNode(item));
});

var fragment = document.createDocumentFragment();

jsonItems.forEach(function(item) {
    fragment.appendChild(convertToDOMNode(item));
});

document.getElementById("container").appendChild(fragment);

---

B肯定是最慢的，几乎所有的js教程都建议不要这样做。再想一想，C也可能很慢，因为appendChild是一个DOM修改，它总是比较慢。还有一个更老的实验，你可以自己在页面上运行：

我会使用

文档片段。我绝对不会使用选项2，因为这将需要在每次插入时重新呈现页面。看看jQuery先生自己做的关于这个问题的速度测试，j。雷西格。他建议使用
DocumentFragment
，因为它在他的测试中提供了2-3倍的性能增益


正确的答案是，请自己进行基准测试：）

我个人认为
.innerHTML
是魔鬼，所以请使用文档片段

我想我们都知道文档片段比直接将数据注入DOM要好。这与从屏幕上渲染内容然后将其交换回屏幕的逻辑完全相同。
与生成节点的方法相比，innerHTML与DOM的性能不会太显著。我相信innerHTML的速度会最快，因为convertToHTML函数比其他函数快。innerHTML只进行一次DOM调用，它的浏览器机器代码解析字符串，创建DOM节点，并一次性注入DOM。这是所有解释代码的javascript方法中速度最快的。如果您可以使ConvertToHTML比innerHTML的所有其他转换函数性能都好，那么innerHTML是最快的
 不久前我们也遇到过同样的问题，规模不是这么大，但已经足够大了。我们最终使用绑定在服务器级别创建HTML（因为它很快），然后在ajax调用的成功回调中，在客户端将发送的HTML片段一次附加到父div元素。它比您在这里描述的任何其他方法都要快，并且响应大小（流量使用）只增加了20KB，这在我们的例子中是可以接受的。希望此帮助：）
C）显然是一种方法……为什么不在服务器上执行此操作，并传递HTML？@pst B的速度要慢得多。因为它会强制重新呈现页面，而文档片段不会层叠重新呈现回页面。@pst在IE8中显示一个基准测试，其中文档片段的速度不会明显加快。@pst运行B）会降低我的速度。每次测试性能都需要几秒钟。我已经为您发布了一些IE数字——它比FF受影响小得多。它（一个文档片段）在IE9中并没有明显更快：）有趣的是，Chrome在文档片段/直接和内部HTML内容中都做得很好。。。但愿我能为IE说点好话。