Best performance for jQuery Selector

Question

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

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

But there are a lot of these links, and I feel that it is inefficient. I suppose there is a way to report that the selection request will be stopped after the first match and thus save processing time. Here is how I imagine it:

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

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

Answer 1

You don't need :first , because the css method only considers the attribute of the first element in the set of matched elements.

http://api.jquery.com/css/
css (propertyName)

Get the value of the style property for the first element in the set of matched elements.

Answer 2

Oddly enough, I get "a: first" consistently faster on Safari and Firefox, and slower on Chrome and Opera for these tests . However, these results are for almost 12,000 links per page, so the millisecond here or there should not be pulled by the hair.

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 the links. Assign a unique identifier to the first link and get access only to this. Below is a new new test with a single element search, and it removes other methods from the proportion. Needless to say, this will obviously be very fast, but this is just a comparison in fact, how much faster.

OK, I can not help 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

Answer 3

The jQuery selector mechanism processes the selector :first , first searches for ul.relatedAlbums li a , then applying a filter to all the relevant elements. Although this filter is quite short:

 first: function(elem, i){ return i === 0; } 

It still generates a function call for EVERY element in the selector.

The .css(prop) method will return jQuery.curCSS(elems[0], prop) . Therefore, the :first selector is pure garbage.

Answer 4

what RamboNo5 said, but if you want to edit the background color only for the first element, you can use

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

as you said, but I think you can also use

 var origiColor = $("ul.relatedAlbums li").first().css("background-color", "red"); 

I have not tried it, but I think it should work, and I believe it is faster since you do not require parsing the selector.

take a look at: - api.jquery.com/first-selector/ - http://api.jquery.com/first/ for more information

Answer 5

I don't think so: the first selector will buy you a lot.

One of the best ways to improve performance with the selector is to use an optional context parameter with the id selector.

Something like that...

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

This second context selector actually tells the jQuery engine for the first DOM lookup for #surroundingDiv. And then these results narrow even further with the first selector.

Since the id selector is the fastest of all selectors, this method can sometimes double the performance depending on the relative size of the context compared to the rest of the DOM.