渲染速度:一次添加一个DOM项或一次添加项集

Render speed: adding one DOM item at a time or adding set of items at once

本文关键字：一次 添加 速度 DOM 一个      更新时间：2023-09-26

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

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

在第二个浏览器的这一部分有点滞后（有动画和其他东西…）。创建单独的div.results并在javascript中添加项目，然后在dom中替换它会更有效吗？最有效的方法是什么？这些事情通常是怎么做的？

我要做的是使用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);

循环的每次迭代都要重新查询DOM。如果您不认为在循环时.results元素的数量会发生变化，那么就没有理由这样做。

如果您关心性能，可以减少jQuery的使用。

var frag = document.createDocumentFragment();
$.each(results, function(key, val){
    frag.appendChild(document.createElement("div"))
        .appendChild(document.createTextNode(val))
});
// Since you're using a class, I assume there's more than one `.results` element
$(".results").each(function(i, el) {
     el.appendChild(frag.cloneNode(true));
});
相关文章：