Comments on: :first Selector

By: Chris

Chris — Sat, 06 Nov 2010 01:14:53 +0000

I did a test using firebugs console.time, and doing a $('.blah') vs. $('.blah:first'), with no :first the test came back 0 ms, and with :first it took 4 ms, then putting both of those in a loop and ran each 1 thousand times, no first was on the order of a hundred ms, while first was on the order of 1000 ms. So doing :first does not actually stop the query from checking the rest of the dom, so you are better off not doing :first, at least until browsers and js are smart enough to stop checking the dom.

By: Chris

Chris — Fri, 05 Nov 2010 17:14:53 +0000

By: Roger Proctor

Roger Proctor — Wed, 15 Sep 2010 06:13:45 +0000

simple question more to with firebug console debugger why does :first get identified as unknown pseudo-class

By: Benjamin H Kohl

Benjamin H Kohl — Thu, 26 Aug 2010 11:27:32 +0000

Why are people so concerned about milliseconds? If you have to use any tools to measure the difference in performance of these various selectors, then the difference is negligible. When you buy a box of cereal, do you take it home and check to make sure the box contains the exact number of ounces that is displayed on the box? Unless you are obsessive, you probably don't. I have ever executed some JQuery and said to myself, “That is 14ms of my life I wish I had back.”

By: MrBester

MrBester — Thu, 24 Jun 2010 06:09:11 +0000

FWIW:
console.time('loop'); for(var i=0; i<1000; i++){$('div').eq(0);} console.timeEnd('loop');
is only 7.5% slower than not specifying the index, but including ':first' nearly doubles the time taken. At least it does on a simple example page I'm using to test. If every ns counts then speciying the index is the way to go, unless someone feels like forking Sizzle to short-circuit the ':first' selector. No, didn't think so…

By: milesslow

milesslow — Sun, 06 Jun 2010 01:50:17 +0000

Wow, you're right. I guess I was forgetting that computers don't understand the semantics of the ':first' selector. They treat it like any other position selector, which I think are processed at the very end (consider the ':last' selector, which can only be processed after all matching elements are found). That's what I get from glancing at the sizzlejs source. Honestly, it doesn't matter if it takes twice as long (three times on my page), because it takes < 1ms for either selector, and if you ever use a position selector 1000 times in a row, you should be using a better data structure than an html document.

By: Jeremy

Jeremy — Thu, 03 Jun 2010 14:52:00 +0000

Using first in theory should be much faster but in practice it can be quite a bit slower. Try this:
console.time('loop'); for(var i=0; i<1000; i++){$('div');} console.timeEnd('loop');
vs this:
console.time('loop'); for(var i=0; i<1000; i++){$('div:first');} console.timeEnd('loop');

On one page I am working on the second takes twice as long. Weird.

By: milesslow

milesslow — Fri, 09 Apr 2010 02:05:00 +0000

If performance is your only concern, and you know the selector is only going to match one element, then YES, use the ':first' selector. The truth is, $('tr:first') is either going to be a lot faster than $('tr'), or negligibly slower. If it bothers you not knowing for sure, then please take a stab at reading through Sizzle, and let us know what you find out.

By: hc

hc — Thu, 08 Apr 2010 16:03:14 +0000

Wow, I shouldn't have given an example, as people seem to focus on that instead of the actual question about performance. The table example was for illustrative purposes only. Obviously it's not real. What's the point of a table with only one row?

My question is, when you have a selector (any selector), that you know will only return one element, is the jQuery processing faster if you explicitly include “:first”. My inclination is that “:first” would be faster, because as it travels the DOM looking for matches, it stops as soon as it finds one, whereas a selector WITHOUT “:first” would have to continue looking for matches even if ultimately there is only one match. But that's just my hunch, and it'd be nice if someone could definitively say which is true, preferably with performance statistics. I guess I'll have to do some measurements myself.

By: R Bemrose

R Bemrose — Thu, 08 Apr 2010 15:04:33 +0000

I would still stick to the version with the :first selector, as it somewhat future proofs things.

In fact, to REALLY future proof it, perhaps it should be:
$('table > tbody > tr:first')
This is assuming any table headers ( tags) would be in a