Best Performance for jQuery Selector

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?

Answer 1

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

Firefox

Chrome

Opera

---

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://chart.apis.google.com/chart?chtt=Ops/sec%20%28Safari%204.0.5%20on%20Intel%20Mac%20OS%20X%2010_5_8%29&chts=000000,10&cht=bhg&chd=t:61,69,68268&chds=0,68268&chxt=x&chxl=0:%7C0%7C68.3K&chsp=0,1&chm=ta%2861%29,000000,0,0,10%7Cta:first%2869%29,000000,0,1,10%7Ct#firstLink%2868.3K%29,000000,0,2,10&chbh=15,0,5&chs=250x110

Firefox (30,000% faster)

alt text http://chart.apis.google.com/chart?chtt=Ops/sec%20%28Firefox%203.6.4%20on%20Intel%20Mac%20OS%20X%2010.5%29&chts=000000,10&cht=bhg&chd=t:36,69,10883&chds=0,10883&chxt=x&chxl=0:%7C0%7C10.9K&chsp=0,1&chm=ta%2836%29,000000,0,0,10%7Cta:first%2869%29,000000,0,1,10%7Ct#firstLink%2810.9K%29,000000,0,2,10&chbh=15,0,5&chs=250x110

Chrome (24,000% faster)

alt text http://chart.apis.google.com/chart?chtt=Ops/sec%20%28Chrome%205.0.375.70%20on%20Intel%20Mac%20OS%20X%2010_5_8%29&chts=000000,10&cht=bhg&chd=t:274,154,103377&chds=0,103377&chxt=x&chxl=0:%7C0%7C103.4K&chsp=0,1&chm=ta%28274%29,000000,0,0,10%7Cta:first%28154%29,000000,0,1,10%7Ct#firstLink%28103.4K%29,000000,0,2,10&chbh=15,0,5&chs=250x110

Opera (38,000% faster)

alt text http://chart.apis.google.com/chart?chtt=Ops/sec%20%28Opera%209.80%20on%20Intel%20Mac%20OS%20X%29&chts=000000,10&cht=bhg&chd=t:43,22,10346&chds=0,10346&chxt=x&chxl=0:%7C0%7C10.3K&chsp=0,1&chm=ta%2843%29,000000,0,0,10%7Cta:first%2822%29,000000,0,1,10%7Ct#firstLink%2810.3K%29,000000,0,2,10&chbh=15,0,5&chs=250x110

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