Remember: IE (still) doesn’t have getElementsByClassName, so in IE, jQuery has to iterate the whole DOM and check whether each elements class attribute contains "lineitem". Considering that IE’s DOM isn’t really fast to start with, this is a HUGE no-no.
via How to kill IE performance « gnegg.
Doing something as simple as:
[sourcecode lang=”javascript”]
$(‘.some-class-name’)
[/sourcecode]
with jQuery in Javascript can be brutal in IE if it matches a large number of nodes in the DOM. The reason, as noted in the quote above, is because IE doesn’t have a native getElementsByClassName() Javascript function. As a result you have to walk the DOM looking for nodes with that particular class. Expect this to be slow. If the DOM for your page is large expect this to be painfully slow.
The good news is that modern versions of other other major browsers out there do implement getElementsByClassName() and that the IE9 previews also support it. Unfortunately this means killing off IE6 isn’t enough, we’ve got to find a way to convince people who stick with IE to move all the way up to IE9 (once it is finally released). Not an easy task since IE9 requires Windows Vista or Windows 7. If you are still on Windows XP (still the most popular OS for those browsing the web), IE9 is not an option for you.
What do we do in the meantime? First, be careful when using a class to select nodes. Second, convince people to download Chrome, Firefox, or Safari and stop using IE (unless they are already using the IE9 betas).
UPDATE: Want a better idea of how much faster a native implementation of getElementsByClassName() can be? Check out John Resig’s speed comparison from March 2007.
2 replies on “How To Kill IE Performance”
I heard somewhere that you can speed things up a bit, even when targeting classes, by being specific in the jQuery selector like so …
$('#header .some-class-name')or
$('#content .some-class-name')or
$('#sidebar .some-class-name')This way, the browser doesn’t have to traverse the entire DOM … it can use getelementbyid() to find the parent first, which narrows down how much of the DOM it has to look through to find the class.
If true (which it may not be), then even narrowing it down a little bit will help. Obviously, the more specific you can be, the better this method will work.
I haven’t checked the jQuery source code, but I’d be surprised if they weren’t leveraging getElementById() to improve those types of lookups.