Question

I’ve currently run into a performance problem when updating properties on lots of dom elements at once. It seems that each time I change a property the dom element gets re-rendered. Is there anyway I can delay the rendering of the elements until all of my updates have taken place? It seems to be a lot slower in FF 3 & 3.5 than IE 7 & 8 which goes against what i expected.

An example of what i’m doing is below.

var t;

for (var i = 0; i < tiles.length; i++) {
    t = tiles[i];
    t.width = '100';
    t.height = '100';
}

The issue is that the number of items in “tiles” can be up to 100 dom elements. Which is where the performance issues really show through.

Answer 1

Agree with @Crimson but I think that it will be better to hide the parent of all the elements that you’re updating and if they don’t have an exclusive parent, try to create one.

In that way only two reflows will occur, one when you hide the tile container, and other when you finish the element manipulation and you show it again.