渲染速度：一次添加一个 DOM 项或一次添加一组项

Posted 2023-05-09

【中文标题】渲染速度：一次添加一个 DOM 项或一次添加一组项

【英文标题】：Render speed: adding one DOM item at a time or adding set of items at once

【发布时间】：2013-07-12 00:31:01

【问题描述】：

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

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

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

【参考方案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);

【参考方案2】：

您在循环的每次迭代中都重新查询 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));
);