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.
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.
Safari (112,000% faster)
Firefox (30,000% faster)
Chrome (24,000% faster)
Opera (38,000% faster)
- 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?