jQuery Micro Optimizations
Long time ago Donal Knuth said,
Micro-optimizations are worth it while premature optimizations are the root of evil
And the difference between micro-optimizations and premature optimizations is that the first ones are driven by measurement while the second ones are driven by guesses, intuitions and hunches.
Corey Hart has analyzed jQuery code and came up with a fun post which list some of the micro-optimizations you can do when writing web applications using jQuery. And jQuery is one of the popular JS libraries and there are thousands of projects which use jQuery. So with the advancement of Web 2.0 and Ajax based cross-browser apps, I think it’s worth to consider these optimization tips when writing code which use jQuery. According to Corey you need to be careful when selecting the micro-optimizations he suggested.
The post is really interesting and here is the list of optimizations suggested by him.
- jQuery.root : Internally, all selectors that don’t provide a context use jQuery( document ).find( selector ). Save yourself some ms, store the document root onto jQuery itself, and then run all global selectors off of that element.
- Context sucks, use find: Don’t get me wrong, you should always run selections based on a context if possible. But passing in a context to the jQuery constructor creates an extra unneeded function call. Internally jQuery runs context.find( selector ) anyway, so skip that step
- Live is terrible, delegate is awesome: The best part: delegate is live with a context. So why is live a bad idea? To use live, you first have to run a selection on the page, and then bind the live handler.
- jQuery.data > jQuery.fn.data: If you are getting/setting single key values, always use jQuery.data over the jQuery.fn.data method. Here’s a common example and the fix for it.
- Bind and Trigger, get used to it: Nothing better than going directly to the source. All the event methods, like click, focus, blur, submit, etc., are just short-hand methods mapping to bind and trigger, only with an extra function call. Getting used to using bindand trigger directly will not only reduce the number of function calls, but will also help you when working with larger applications that require namespacing your events.
- Each is evil: Actually, each is a pretty awesome utility function. The problem is that there is only one true reason to use each, and that is when a closure is needed for each item. If you are just looping through an array, then the callback function gets triggered on every iteration. So using an array of 25 items, the callback gets triggered 25 times. That can really add up depending on the size of your array.
- Classes over Styles: I would go so far as to say that using a class for a single style change is better than running through jQuery’s style module.
- Object.length, use it: Every jQuery selection comes with a length property that defines how many elements were found. Always check to make sure that there is a set of elements in your object before running a chain of methods.
There are code examples in original post. So please go and have a look at it if you are really thinking about above micro-optimizations.



