Friday, 27 September 2013

jQuery append in loop - DOM does not update until the end

jQuery append in loop - DOM does not update until the end

When looping over a large collection and appending it to the DOM, the DOM
only refreshes after all items have been appended. Why doesn't the DOM
update after each append() call? Can I force the DOM to refresh after each
append (or maybe after each n number of appends)?
var i = 0;
for (i=0; i<5000; i++) {
$('#collection').append('<li>Line Item</li>');
}
Link to jsfiddle
NOTE: I understand that better performance (avoiding DOM reflow) can be
achieved by appending all elements to a local variable, and then appending
that variable to the DOM. But I want the first n elements to render on the
screen, then the next n, etc. until all elements are rendered.

No comments:

Post a Comment