Delay rendering of dom element when changing properties

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.

Answer 2

Declare display:none for each tile before you make changes and display:block when all changes are done.

Answer 3

To avoid the flash you could replace the parent with a clone of itself and then work on the original parent outside of the document. Then, when you're done, you could replace the clone with the original:

var parent = /* define parent here */;
var clone = parent.cloneNode(true);

parent.parentNode.replaceChild(clone, parent);

/* Do stuff with parent and its childNodes... */

clone.parentNode.replaceChild(parent, clone);