Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

November 23, 2007

10 Comments

jQuery: what are the fastest selectors?

by in Javascript,jQuery,Web Development on November 23, 2007 @ 4:40 pm

Update 12/07/2007: per Brian Cherne comments, I decided to run these test again in Firefox with firebug lite instead of firebug and the execution times were dreastically different. So, to “level the playing field” I would suggest that you turn off firebug or disable it for the page and refresh, you will get the firebug lite console pop up at the bottom of the screen and then run the test. You will get much better results; but I most ask this question, because after searching I could not find the answer, why the difference in speeds?

I’ve been using jQuery for over a year now and have built some pretty big apps with it as my “selector” engine and had always wondered what were the fastest ways to select an element. After reading a post on the mailing list I decided to put some selectors to test. First thing I had to figure out what was the best way to really test out some selectors. So I went about just grabbing some site I came across while Stumbling, but after doing some testing using that sites content I came to the realization that I would not know how to implement a “test” suite on my site. So what I decided was to just implement an on the fly test suite on my content.

With that said, here we go:

If you do not have firebug installed, you will have a Firebug lite console pop up at the bottom of the screen. If you do have Firebug installed, be sure to open it to follow along.

This page has x DOM elements on it. So, what ever selection we make will cycle/search through that total number of elements.

First up is to find an element with the ID of “shareThisBookmarkThisone” (this is the “Share this…” div that is currently hidden) and to select this element we will do:

  1. $("#shareThisBookmarkThisone")

After running that test you should have a number around 10 – 20 milliseconds. In this case, it is the equivalent of “getElementById” which is a built in JavaScript method that searches for an element node with an id attribute whose value is “shareThisBookmarkThisoneButton.”

Pretty simple selector, lets move onto another simple one that should be pretty fast.

On this page, I have x DIV elements.

  1. $("div")

After running that one, you should be looking at something between 0 – 10ms with Firefox about the 100ms range, once again, pretty simple.

Now let start getting into what selection methods are faster, say we want one of those DIVs with a class of “adspace,” which approach would be faster? One this page, I know we only have one to work with, so we should be able to get a reasonable return time.

Our first approach would be:

  1. $(".adspace")

  1. $("div.adspace")

  1. $("div").filter(".adspace")

For “Test 3″ we should get about 15ms in Firefox 2, Safari 3, between 0 – 16ms in Opera 9.2 and 0ms in IE6 and IE7, whereas we get 0ms across the board for “Test 4.” Now in “Test 5″ we get 0ms for all except Firefox, where we get around 15ms.

What does the above tell us? That if there is only one element things are quicker? Not sure, but lets put that to the test, I posted some empty DIVs, some with a class of “selectMe” and others with some random classes, you can view the source to see what these DIVs look like.

  1. $(".adspace")
  2. $("div.adspace")
  3. $("div").filter(".adspace")

With “Test 6″ we are looking getting back 153 results and I really must say that I am a little shocked by the results:

  • IE7
    • 6.1: 16ms
    • 6.2: 15ms
    • 6.3: 0ms
  • Safari
    • 6.1: 16ms
    • 6.2: 0ms
    • 6.3: 0ms
  • Opera
    • 6.1: 31ms
    • 6.2: 0ms
    • 6.3: 0ms
  • Firefox with firebug
    • 6.1: 141ms
    • 6.2: 109ms
    • 6.3: 109ms
  • Firefox with firebug lite
    • 6.1: 31ms
    • 6.2: 0ms
    • 6.3: 0ms
Final Notes

Before we get into what we learned let me put a bit of a disclaimer here. I have not really looked into the full workings of the jQuery framework, so anything I say is based off of my assumptions and what I learned as I have built with it. The numbers you see above are from browsers that are running on a not so average computer, so they are not from the average user’s/client’s computer.

What did we learn? That if you are looking for all elements with a certain class and they are all of the same tag name, do $(“TAGNAME.CLASSNAME”) or $(“TAGNAME”).filter(“.CLASSNAME”). That if you have only a single element that needs to be called and there will not be duplicates, your fastest selector is going to be the $(“#ID”) selector. That, with the exception of Firefox, the leading browsers handle a TAG search pretty quickly. Firefox had comparable speeds to the other browsers once firebug is turned off.

Something to keep in mind is that we did not do any manipulations, ie. css(), append(), animate(), or any really complex selectors and those will add time your actions.

jQuery is the library of choice for me, you are free to use any of the many libraries out there.

back to beginning of this post back to skip to links

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

10 Responses to “jQuery: what are the fastest selectors?”

It’s not as big a surprise as you think. The jQuery team has been up front about the fact that the library is optimized to run more effciently in IE.

@Andy: I think I did not finish my thought with the “I’m a little shocked…” statement, the jQuery team has been very up front about it being optimized for IE. Every time that “SlickSpeed test” pops up in conversation on the mailing list, that point is stressed.

My ending thought was that I am shocked that firefox was so slow compared to the other browsers, yes, we are talking milliseconds, but the point of the post was to find the fastest.

My other thought is and I think shocked is probably to strong a word for it, surprised maybe, but in test 6 line 2 and 3 are faster in all browsers compared to line 1 and that goes against some of the advice and discussions that were had when I got started with jQuery back version 1.1.

Nice post. Very interesting. :o)

Always make sure you level the playing field as much as possible before making comparisons :)

Firefox+Firebug:
6.1: 113ms
6.2: 103ms
6.3: 105ms

Firefox+Firebug lite:
6.1: 32ms
6.2: 7ms
6.3: 8ms

@Brian: very true but would not have thought for one second the it would have been slower with firebug and faster with firebug-lite. Well, that does change things. I am going to have to reevaluate some of these numbers.

Thanks for that tip.

Hi Benjamin,

This topic is very interesting. I wrote an article that might complement yours. I created a big html page with over 20,000 elements and test more selectors. Comments from the community are always welcome:
The article is here: http://www.componenthouse.com/article-19

Best regards,
Hugo Teixeira

@Hugo: Nice post, I would argue that you would only probably see 5000 items on a single page is if there is a data table. So a better test case would have probably been TABLE elements like tr and td instead of P and SPANS, maybe DIVs.

But over all a really nice follow up. My post was only really geared to what I seem to do on a daily basis.

Trackbacks

  1. mulling.net » Blog Archive » My del.icio.us bookmarks for November 25th
  2. jQuery: Select what you want - part 1 | The Book and the Cover
  3. More on jQuery selectors | rdmey

Learn from my mistakes, I got burnt by the flame, you don't have to.


RSS Feed Link My Hosting of Choice

64 queries. 0.374 seconds. Powered by WordPress visitor stats