Alex Rivera | Logout

Delay rendering of dom element when changing properties

Asked 2009-09-08T05:01:56.030
10

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.

javascript performance
Edit
Report

1 Answer

0

It seems to be a lot slower in FF 3 & 3.5 than IE 7 & 8 which goes against what i expected.

Currently FF recalculates the layout straight away on a property change. IE waits until either it has to redraw the page, or you access a property like offsetWidth that needs to know the new layout. This didn't always used to work correctly.

CMS's approach is good. If all your tiles are the same size as in the example, there's an even quicker way (which also works if the tiles don't have a common parent). Just give them all a class and switch them all at once using CSS:

body.tiles100 .tile { width: 100px; height: 100px; }

document.body.className= 'tiles100';

If you don't know a predefined selection of possible sizes in advance, you'd have to write the stylesheet rule dynamically, through the document.styleSheets list. This is a bit of a pain, though, because the scripting interface in IE doesn't quite match the DOM standard used by other browsers. Again.

answered 2009-09-08T10:47:27.980

Your Answer