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

时间:2013-07-13 16:57:13

标签: javascript jquery dom dom-manipulation

目前,当我收到搜索结果时,我会遍历结果并将其附加到列表中(我想这会导致浏览器每次添加项目时重新呈现页面 - 有没有办法确认这个?)。

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

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

2 个答案:

答案 0 :(得分: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);

答案 1 :(得分:1)

每次迭代循环都会重新查询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));
});