Question

当循环遍历大型集合并将其附加到DOM时，DOM仅在追加所有项目后才刷新。为什么在每次append()调用后DOM都不会更新？我可以强制DOM在每次追加后刷新（或者在每n次追加后刷新）吗？

var i = 0;
for (i=0; i<5000; i++) {
    $('#collection').append('<li>Line Item</li>');
}

Link to jsfiddle

注意：我理解通过将所有元素附加到局部变量，然后将该变量附加到DOM，可以实现更好的性能（避免DOM重排）。但我希望前n个元素在屏幕上呈现，然后是下一个n等，直到呈现所有元素。

Answer 1

当Javascript运行时，浏览器中的大多数内容都会停止。这包括例如DOM渲染，事件处理，图像动画。

导致DOM呈现的唯一方法是结束Javascript。您可以使用setTimeout方法在更新后再次启动代码：

var  i = 0;

function appendSomeItems() {
  for (var j=0; j<50; i++, j++) {
    $('#collection').append('<li>Line Item</li>');
  }
  if (i < 5000) window.setTimeout(appendSomeItems, 0);
}

appendSomeItems();

演示：http://jsfiddle.net/Uf4N6/

Answer 2

您需要每隔一段时间将控制权交还给浏览器：

    var current = 0


    function draw() {
        var next = current + 10
        for(var i = current; i < next; i++) {
            $('#collection').append('<li>Line Item</li>');
        }
        current = next
        setTimeout(draw, 50);
    }

draw();

Answer 3

一般情况下，请不要多次触摸DOM。这是你已经观察到的性能杀手。

var result="";
for (i=0; i<5000; i++) {
    result+='<li>Line Item</li>';
}
$('#collection').append(result);

这样，您只需触摸一次DOM！

另一种方法是使用数组。

var result=[];
for (i=0; i<5000; i++) {
    result.push('<li>Line Item</li>');
}
$('#collection').append(result.join(""));

Answer 4

如果这真的是你想做的......

var i = 0;
for (i=0; i<5000; i++) {
    setTimeout(function() {
        $('#collection').append('<li>Line Item</li>');
    }, 0);
}

jQuery追加循环 - DOM直到最后才更新

4 个答案: