javascript - HTML/性能 : Handling massive dynamic DOM insertion

Question

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

A) 遍历对象，为每个对象生成标记，将它们全部连接起来，并将容器 div 的 innerHTML 设置为连接后的标记:

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

C) 遍历对象，为每个对象生成一个 DOM 节点，按顺序将它们附加到 DocumentFragment，然后将片段插入容器中:

var fragment = document.createDocumentFragment();

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

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

Answer 1

Benchmark

正确答案是请自己进行基准测试:)

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

而且我想我们都知道文档片段优于将数据直接注入(inject) DOM。这与从屏幕上渲染内容然后将其换回的逻辑完全相同。