Quick tips for optimizing your jQuery technique

Optimize your Selectors for speed

Selector Speed

1. #id
2. tag
3. .class
4. Other weird ones

It could be that some of the other selectors can be faster than class. I haven't done extensive research, so if you're in doubt try it out.

While it's okay in your css to have verbose selectors that describe the structure more accutely e.g. #page #header #nav .current, doing this can really slow down jQuery selector speed. Remember that you don't have to worry about the cascade affect in jQuery, just be concise. The Sizzle Selector Engine of jQuery 1.3 also processes selectors in a right to left fashion, so in the example above it's going to get all elements and check each one for a class matching "current" and then compare the parents of what it finds to the rest of the selector removing anything that doesn't match the pattern. This selector can be made much faster like this #nav li.current. By adding the li jQuery switches from getting all elements to using the DOM getElementsByTagName(), which is much faster, then it just looks up and sees the parent with #nav and stops. A lot less filtering will take place.

Minimize Selections

If you're making the same selections repeatedly in your scripts you should just set a variable.

$("#aside").hide();
...
$("#aside").show();

Can be written as

var $aside = $("#aside").hide();
...
$aside.show()

Evaluate re-selecting as opposed to traversal

Sometimes it can be a lot faster to go $("div.subSection") rather than $(this).children("div.subSection")

So if you're in a situation where it looks like a reselect can be faster try it out and compare. The difference between these can vary a lot so I can't generalize here, but test it in your situation. Don't forget that code readability matters so if the difference is trivial make the code easier to understand.

Rely on jQuery less

As cool as jQuery is often you can get some good speed increases if you switch to plain JavaScript. You don't want to do this all the time as jQuery solves a lot of browser bugs that could be a real time sink. But if you're noticing a slow sort function or something that could use a speed up don't be reluctant to fall back to for loop and normal DOM.

Usually, spending a lot time on performance optimization can be a waste, but sometimes it'll really make a difference between a clean responsive UI and one that is so slow that you might as well avoid JavaScript. I know it's easy as an intermediate JavaScripter to rely on libraries for most of what you need to do, but take the time to learn some of the old ways and it can really take your code to the next level.

zenTooltip - Simple, Unobtrusive, yet memorable tooltip plugin

I've used a few tooltip scripts over the past couple years and none of them I've really liked. They either try to do everything or not enough. So I've come up with my own tooltip plugin for jQuery.

Introducing zenTooltip

• Uses title attribute for the benefit of progressive enhancement
• Uses simple html/css
• Restyling to fit your needs is simple
• Supports special formatting in the tooltip via a mini-markup syntax.
• formatting is easily extendable and is optional
• Collision detection for the browser edges
• It's open source under MPL, so do what you want

Demo and Docs

I'll be uploading the demo page to my personal site soon but until then the script and demo page is available on the zenTooltip page of Google Code.

If there's things you think the plugin should do let me know. I want to avoid feature bloat, so if you want it to load AJAX content or anything crazy like that that will be a different plugin. Feel free to leverage this code to do it and let me know so we can cross-promote.

Update: I think it's finally hit a 1.0 status. Need to get some users to test it out. Feedback welcome.