javascript - jQuery append in loop - DOM 直到最后才更新

Question

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

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/