Over my head

I've been involved in developing a AJAX framework which sits on top of the Microsoft AJAX libraries.

This contains a layout manager which manages the DOM, so for example if the user re sizes the browser window, the layout manager will manipulate the DOM to ensure the correct layout.

In most cases it merely sets the height and width styles on DOM elements and applies CSS classes.

When testing with IE6 my colleague noticed that any images managed by the layout manager (i.e. tab headers) were flickering and that resizing was generally slow.

I assumed that the layout manger was to blame. It wasn't directly.

All images associated with the layout manager are referenced in CSS classes to allow for "themes".

The layout manager will perform the following sequences of actions:

• Apply CSS to a DOM element - if the CSS references an image, your browser will request the file from the server
• Next, remove the CSS class from the DOM element...
• Then, if re-apply the same CSS class again to the previously mentioned DOM element - you would not expect the image to be requested again.

This is not the case for IE6.

Every time the layout manager was re-applying the same CSS class to the DOM, the associated resources were being re-requested.

We used fiddler to confirm this.

We added a expiry header to all the referenced images (IIS configuration) and now the layout manager runs *almost* as quickly in IE6 as it does in IE7.

Woot.