Best Performance for jQuery Selector


Weird as it may sound, I am getting "a:first" consistently faster on Safari, and Firefox, and slower on Chrome and Opera on these tests. However, these results are for almost 12,000 links on the page, so a millisecond here or there is not worth pulling hairs over.


alt text


alt text


alt text


alt text

To really optimize this, you should never select all links. Assign a unique ID to the first link, and access only that. Here is a new test with searching a single element, and it blows the other techniques out of proportion. Needless to say that this was obviously going to be really fast, but this is just a comparison of actually how much faster.

OK, I can't resist adding jQuery style performance numbers from its 1.0 days :)

Safari (112,000% faster)

alt text

Firefox (30,000% faster)

alt text

Chrome (24,000% faster)

alt text

Opera (38,000% faster)

alt text


  • OS: OS X 10.5.8
  • Opera: 10.10, build 6795
  • Chrome: 5.0.375.70
  • Safari: 4.0.5 (5531.22.7)
  • Firefox: 3.6.4

This gets and stores the background color of a specific link:

var origColor = $("ul.relatedAlbums li a").css("background-color");

But there are a lot of those links, and I get the feeling that this is ineffecient. I imagine there's a way to tell the selector query to stop after the first match, and thus save on processing time. Here's how I imagine doing that:

var origColor = $("ul.relatedAlbums li a:first").css("background-color");

Is this the right / efficient way to do it? People say that using css pseudo classes is slow - but I'm not sure if that applies. This just has the same syntax, is that right?