benjaminsterling.com

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:

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.

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:

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.

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.