Modifying the 'className' property is extremely slow in IE7

Question

On my website, I dynamically modify the javascript 'className' property of a DIV. However this is an extrememly expensive operation, as the DIV contains a lot of child nodes. Sometimes it takes up to 1.5secs.

Is there a way of speeding up this operation? Like, hiding the content, performing the operation, then showing the content again?

Update:

Some additional information.

The actual code:

$("#myDiv").tabs();

It is located witin the .ready() handler. See http://jqueryui.com/demos/tabs/

This is the expensive call. I tracked it further down to the className property, which consumes all that processing time.

The DIV contains a big sharepoint datagrid, see http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spview.renderashtml.aspx The code is run on Sharepoint, tested on WinXP + IE7.

So I wonder if we can disable the layout refreshing while manipulating the DOM or something like that. Are there any tricks?

Answer 1

Try making sure that the CSS selectors that affect elements contained within the container whose class name is changing only use the container class when they really have to. Obviously, when you're driving layout with the container class, there are probably a lot of things affected, but sometimes it's easy to drop in div.whatever td.currency when really all you need is td.currency (just a made-up example).

The IE layout engine is really fast for some things, but I've found that heavy use of this sort of layout technique (which is, I believe, a very good practice in general) can tax the browser a lot. Thankfully, IE8 is a lot better at this sort of thing.

Answer 2

I achieved ~50% performance improvment when switching tabs by removing the two tabs to switch from their parent before changing the className property. For implementation details, see https://developers.google.com/speed/articles/javascript-dom