I usually like to keep my HTML code clean, semantic and free of Javascript or CSS. I include my.JS and .CSS files at the top and layer functionality on top of the DOM elements.
Positive are:
- Architectural separation of concerns
- Graceful degradation when Javascript or CSS is not supported
- Search Engine Friendly
There is one major negative:
- Performance Issues in IE 6
Since all events are tied to elements through Javascript code that accesses the DOM, IE performance suffers.
This is especially important when using jQuery (which happens to be my favorite Javascript framework).
So, it seems that I have two options: either keep the code beautiful and tidy, or ask IE 6 users (about 20% of the user base), 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 issues are caused by the fact that Javascript is in a separate file.
I can achieve remarkable performance in IE by storing it in a separate file.
The problem is that I still have to put event handlers in the onclick attributes in the HTML. For instance:
<span onclick="doSomething()">More...</span>
It would be much better 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, this seems to be bad for IE6 performance.