IE 6 performance vs. clean, unobtrusive Javascript

Question

Normally I love to keep my HTML code clean, semantic and free from either Javascript or CSS. I include my .JS and .CSS files at the top, and layer functionality on top of the DOM elements.

The positives of this are:

• Architectural separation of concerns
• Graceful degradation where Javascript or CSS isn't supported
• Search-engine friendliness

There is one major negative:

• Performance problems in IE 6

Because all the events are attached to the elements through Javascript code, which accesses the DOM, performance in IE suffers.

This is especially so when using jQuery (which happens to be my favorite Javascript framework).

So it seems like I have two choices: either keep the code nice and neat, and have IE 6 users (around 20% of the user-base) complain, or "de-normalize" the code to improve IE 6 performance.

Is there a "middle way" in this situation? Or am I doomed?

---

Note: I'm not saying that my performance problems are caused by having Javascript in a separate file.

I can achieve wonderful performance in IE while keeping it in a separate file.

The problem is, I still have to put the actual event handlers into 'onclick' attributes in the HTML. For example:

<span onclick="doSomething()">More...</span>

It would be much nicer if I could just write:

<span id="more-button">More...</span>

And then assign it separately, in Javascript, with the following:

$("#more-button").click(doSomething);

Unfortunately, it seems this is bad for IE6 performance.

Answer 1

I don't think your performance problems are because you put your javascript code into separate files. I do that... a lot of people do that... It's considered best practice to do that.

JQuery has some performance issues. That may be one place to look. The other place you need to look is at your javascript code itself. Without seeing that, I wouldn't be able to help you make your application perform better.

Answer 2

You should actually put your JavaScript at the bottom of the page. As far as performance issues around attaching events, make sure to measure carefully before optimizing. Dynatrace AJAX edition is a great tool for measuring and understanding IE performane.

Answer 3

If your code runs on browsers, and just performans bad on IE6, then just feel lucky!

Really, ignore this old beast!

If your code runs perfect on most browsers, and you have to make it slow because IE6 can not run it, then you should display a message to those IE6 users (or just live with bad performance on every browser).

But your situation seems simple and straightforward to me. Do not matter! IE6 is and should be dead!!! Even some big websites have begun to display update notices to IE6 users. Instead of their usual content, they do not support it anymore, because it is crap!

Answer 4

In a talk available at YUI Theater, Joseph Smarr talks about performance and states the opinion that it is ok to have onmousedown handlers and the like in your code for performance reasons instead of finding the DOM element and then attaching the event handler. However, I do not know any measures by which that speeds up things. Other techniques for unobtrusive performance boosts are (EIDT: note that they are browser independent, hence not restricted to IE):

• Use onmousedown instead of onclick. Smarr says there is a 100ms or so period between the firing of the two events.
• For perceived performance: Give instant visual feedback by using window.setTimeout(visualFeedback, 0). That lets the browser draw some graphical change instantly, letting the user know that something is happening.
• When you have to traverse the DOM, cache intermediate results in a variable to reuse them (guess you know that one).

There is also a demo that shows the benefit of the first two points. The button at the top uses onclick and normal execution, the one below uses onmousedown and setTimeout(func, 0).