Question

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

A）遍历对象，为每个对象生成标记，将它们连接起来，并将容器innerHTML的{{1}}设置为连接标记：

div

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

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

C）遍历对象，为每个对象生成一个DOM节点，依次将它们附加到var container = document.getElementById("container"); jsonItems.forEach(function(item) { container.appendChild(convertToDOMNode(item)); });，然后将片段插入容器中：

DocumentFragment

Answer 1

Benchmark

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

我个人认为.innerHTML是 devil 所以请使用文档片段。

我认为我们都知道文档片段优于将数据直接注入DOM。这与在屏幕上渲染内容然后将其交换回来的逻辑完全相同。

Answer 2

B肯定是最慢的，几乎所有的js教程都建议不要这样做。第二个想法C也可能很慢因为appendChild是一个DOM修改，总是比较慢。还有一个较旧的实验，您可以自己在页面上运行：http://andrew.hedges.name/experiments/innerhtml/

Answer 3

我会使用DocumentFragment。我肯定不会使用选项2，因为这将需要页面在每个插入上重新渲染。请先检查一下这个主题的速度测试。 jQuery自己，j。 Resig的。他建议使用DocumentFragment，因为它在测试中提供了2-3倍的性能提升。

http://ejohn.org/blog/dom-documentfragments/

Answer 4

与用于生成节点的方法相比，innerHTML与DOM的性能不会那么显着。鉴于convertToHTML函数比其他函数更快，我确信innerHTML将是最快的。 innerHTML只进行一次DOM调用，它的浏览器机器代码解析字符串并创建DOM节点并一次性注入DOM。对于任何解释代码的JavaScript方法来说，这都是最快的。如果你能使ConvertToHTML的性能超过所有其他转换函数，那么innerHTML最快。

Answer 5

我们前一段时间遇到过同样的问题，不是这个问题，而是足够大。我们最终使用绑定在服务器级创建HTML（因为它很快），然后在客户端成功回调ajax调用时将发送的HTML片段附加到父div元素一次。它比您在此处描述的任何其他方法更快，并且响应大小（流量使用）仅增加了20 KB，在我们的情况下是可接受的。希望这有助于：）

HTML /性能：处理大量动态DOM插入

5 个答案: