CSS Expressions: The Potential Performance Killer

We just spent a few days tracking (and fixing) a horrible performance problem in our app. For the longest time everybody thought it was a JavaScript problem, too big a DOM tree, etc., etc. I tried tracking it down with IE Developer Toolbar, with Firefox Firebug (which is lightyears ahead of IE Dev Toolbar, I must say), to no avail.

The problem is like this: we have a few tabs, each of which contains a large table with a lot of columns. The requirement is to get a few first columns (first name and last name columns) of these tables to be sticky, so that when the user scrolls the table horizontally, he can still see whose details he’s editing.

The CSS-styling for the table is quite straightforward:


#tblCont th.sticky, #tblCont th.chkbox, #tblCont td.sticky,
        #tblCont td.chkbox {
    position: relative;
    left: expression(document.getElementById("tblCont").scrollLeft);
    z-index: 99;
}

You set the class of the th and td to be sticky, and voilĂ , you just made them sticky. They won’t scroll horizontally along with the rest of the columns.

Little did we know how much of a CPU hog a page containing a table styled this way, until we started getting complaints about “typing being too slow”, “tabbing between controls takes 7-10 seconds”, “moving the mouse pointer makes IE 6.0 use 100% CPU”, and so on.

And it’s particularly problematic because nobody thought it was the CSS (not even our web designer, who had come up with this sticky solution in the first place). I spent hours tracking down event handlers for mouseover, keypress, keydown… you name it. Basically the handlers for events that are supposed to be triggered when you type and move the mouse around.

Then my teammate tried removing that part of the styling–and the performance suddenly got a LOT better. I don’t know enough about CSS to give a detailed analysis WHY exactly is this such a performance hog in IE 6.0, but suffice to say, next time I see the same symptoms, I know one more potential suspect to investigate.

We ended up having to split the table into two to make the columns sticky.

Phew!

About these ads

One thought on “CSS Expressions: The Potential Performance Killer

  1. Any script execution at the Style Sheet stack of the browser is a performance issue and more importantly a security threat so the use of IE expressions should not be encouraged. It’s a non-standard approach that does not comply with W3C directives.

    Good news is Microsoft is ending expressions in Internet Explorer as announced on Thursday earlier this week. Indeed a very nice move towards the standard-compliant browser.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s