Demystifying the jQuery selectors optimization

April 28th 2009

Lately, I’ve been experimenting a lot with jQuery selectors. I wanted to find the best way to select elements depending on the situations. I’ve found some information online, but most of them didn’t have number and even worst, they were wrong.

So I’ve built a little demo page where you can run the tests yourself, that way you’ll be able to confirm the numbers. Please note that you need a browser that supports script profiling, that can be Firefox with Firebug or Safari/WebKit (those are the one I use). The version of jQuery I used is 1.3. These test are representative of browsers that supports getElementsByClassname (Firefox, Webkit, Opera), the numbers might be off in browsers such as IE6/IE7, lets look at the future, not the past ;)

So to get started, it’s not true that the more precise you are in your selectors, the better. Some people tends to think (I was one of them) that $(’div.element’) was a better selector than only $(’.element’) because you target more preciselly what you are looking for. It’s not true, not only does jQuery execute more calls, but it’s also longer to process. Now lets say you want to be even more precise, not only you know the classname, but you also know this is the first element you’re looking for, your selector would be $(’div.element:first’). It’s even worst than only specifying the type.

graph_1

So unless you really have to be really precise with your selectors, you should use a simple classname selector instead of the other 2.

Now, let’s move to selecting items at a specific position, once again, the simpler the better. Here are the cases I tested : $(’.sample-elements:first’), $(’.sample-elements .last:last’), $(’.sample-elements div.last:last’), $(’.sample-elements div:first’), $(’.sample-elements div:eq(2)’).

graph_21

And I kept the best for the end, ID selector. If you can, this really is the way to go: $(’#second’). Not only is it the faster way to select an element, but it’s also the one that executes the less calls.

graph_3

So that’s it for selectors, but what if you need to use complicated selectors.

What I usually do when I know I’ll have to use the same complicated selector multiple times, I store it in a global variable with a custom namespace. for example, this selector $(’.sample-elements div:eq(2)’) would translate to $third_sample_element. I add a dollar sign before it so I know this is a jQuery object. By doing this, you’ll do the complicated calls once, your object will then be stored in that variable and no more calls will be needed.

This kind of optimization is not “needed” when you develop small apps, but once you go into more compliated stuff, those small changes can really make a difference. And once you know the tricks, it’s really simple to put them into practice

Experimented it yourself? Have your own trick? Share them!

27 Responses to “Demystifying the jQuery selectors optimization”


  1. Jmav says:

    I don’t see graphs

  2. Al says:

    The graph images are broken. Please fix.

    Also, my experience contradicts your advice in the first point. I’ve found $(’div.element’) to be much faster than $(’element’).

    Thanks.

  3. Matt says:

    As above, I’d like to see working graphs and demo as my experience is quite the opposite.

  4. JD says:

    Strangely I get an error 404 by clicking the very first link (“a little demo page where you can run the tests yourself”)..looks like there is still some “margin-for-errors” 😉

  5. anastgarfield says:

    view , for special offer at my estore

  6. asdfghjkl says:

    I know people have no proper idea for the asdfghjkl;’ and try to solve it with many of their tricks and they usually now works very well. But here all the idea and and way of the solution you can in the bunch.

  7. By moving to this website you can learn how you can delete browsing history of bing and how you can manage it. As this website is known to hub of knowledge as I have visited this site is really helpful.

  8. i love pron says:

    61exzv I see in my blog trackers significant traffic coming from facebook. My blog is not connected with facebook, I don at have an account there, and I can at see, who posts the linksany ideas?.

  9. This website certainly has all of the information and facts I needed about this subject and didn at know who to ask.

  10. You made some nice points there. I looked on the internet for the subject and found most people will consent with your website.

  11. best oil pen says:

    that I have really enjoyed browsing your blog posts.

  12. you can always count on search engine marketing if you want to promote products online.

  13. page says:

    wow, awesome blog post.Really thank you! Cool.

  14. more info says:

    if all webmasters and bloggers made good content as you probably did, the internet shall be much more useful than ever before.

  15. Thanks so much for the article post.Thanks Again. Keep writing.

  16. Very good blog! Do you have any tips and hints for aspiring writers?

  17. mp4 download says:

    Really appreciate you sharing this blog post. Will read on

  18. I truly appreciate this blog post.Much thanks again. Will read on

  19. Really enjoyed this article post.Really looking forward to read more. Will read on

  20. Shiva habitait dans etait si enthousiaste, conducteur irait ranger de

  21. Muchos Gracias for your article post.Really looking forward to read more.

  22. Im obliged for the blog.Much thanks again. Want more.

  23. Julia Blaise says:

    You, my pal, ROCK! I found just the information I already searched all over the place and simply could not find it. What a great web site.

  24. well written article. I all be sure to bookmark it and come back to read more

  25. Perfectly written content, Really enjoyed studying.

  26. Its hard to find good help I am forever saying that its difficult to procure good help, but here is

Leave a Reply