渲染速度:添加一个DOM项目在同一时间或一次添加的项目组(Render speed: adding

2019-09-28 04:36发布

目前,当我在搜索结果中获得来自搜索我循环的结果,并将其添加到一个列表(我想这将导致浏览器重新渲染页面被添加每次项目 - 有没有办法来证实这一点?)。

$.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);


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


文章来源: Render speed: adding one DOM item at a time or adding set of items at once