javascript - 渲染速度 : adding one DOM item at a time or adding set of items at once

Question

目前，当我从搜索中收到结果时，我循环遍历结果并将其附加到列表中(我猜这会导致浏览器在每次添加项目时重新呈现页面 - 有没有办法确认这一点？)。

$.each(results, function(key, val){
    $(".results").append("<div>"+ val +"</div>");
});

第二个浏览器的这部分有点滞后(有动画和东西......)。创建单独的 div.results 并在 javascript 中添加项目然后在 dom 中替换它会更有效吗？最有效的方法是什么？这些事情通常是如何完成的？

Answer 1

我会做的是使用 document.createDocumentFragment() 并在那里执行所有可能的操作，然后接触真实的 DOM 一次。 (在循环旁边缓存一次选择器可能是个好主意):

var frag = document.createDocumentFragment();
$.each(results, function(key, val){
    var a = document.createElement("div");
    a.innerHTML = val;
    frag.appendChild(a);
});
$(".results").append(frag);