CODEWITHSUNDEEP
javascriptjquerydom
Dom M.
Dom M.

Reputation: 3869

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.

Upvotes: 17

Views: 15036

Answers (4)

Blaise
Blaise

Reputation: 22212

Generally, please don't touch DOM too many times. It is a performance killer as you have already observed.

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

In this way, you touch DOM only once!

An alternative way is using array.

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

Upvotes: -2

Guffa
Guffa

Reputation: 700252

Most everything in the browser stops while a Javascript is running. This includes for example DOM rendering, event handling, image animation.

The only way to cause the DOM to be rendered is to end the Javascript. You can use the setTimeout method to start code again after the update:

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();

Demo: http://jsfiddle.net/Uf4N6/

Upvotes: 15

Nicolas Straub
Nicolas Straub

Reputation: 3411

you need to give back control to the browser every once in a while:

    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();

Upvotes: 3

Brian
Brian

Reputation: 7654

If that's really what you want to do...

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

Upvotes: -3

Related Questions