Best Performance for jQuery Selector


Answers

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.

Safari

alt text http://tinyurl.com/27polne

Firefox

alt text http://tinyurl.com/2ay56yr

Chrome

alt text http://tinyurl.com/248nurm

Opera

alt text http://tinyurl.com/254unwc


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 http://tinyurl.com/2b2w2fc

Firefox (30,000% faster)

alt text http://tinyurl.com/25xjzs4

Chrome (24,000% faster)

alt text http://tinyurl.com/28w9fgq

Opera (38,000% faster)

alt text http://tinyurl.com/27lsz2u

Setup:

  • 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
Question

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?







Tags