CSS and jQuery Selector Speed

Question

In jQuery whenever I encounter something like this:

$("div#MyDiv").....

I generally say to the developer: "Don't bother putting the div in front of #MyDiv, ID selectors are the fastest." I.e.

$("#MyDiv")....

This is because the latter will hook directly into document.getElementById rather than having to scan the DOM for all <div> elements first.

My question is, do the same rules apply to CSS selectors? I.e. rather than:

div#MyDiv
{
}

Is it faster to have simply?:

#MyDiv
{
}

(I realise that CSS selectors are incredibly fast anyway, so in reality neither would make a significant difference.)

Many Thanks

EDIT

Any links, or references might be useful for the purposes of this discussion. Thanks :-)

Consider the case of: $("...<img id='foo'/>...").find("#foo"). Ouch. Suddenly the assertions went through the roof (I am unaware how this case actually would work though.) Anyway, the two CSS rules above have different precedence (the form qualified with the tag being just ever so slightly higher). — user166390
– user166390, Commented Nov 4, 2010 at 8:57
Consider the case where the elements are not attached to the document yet. (How does jQuery handle this? Not related to the final question though.) — user166390
– user166390, Commented Nov 4, 2010 at 8:59

T.J. Crowder · Accepted Answer · 2010-11-04 09:06:51Z

11

I'd say that it's extremely unlikely that it makes any real-world difference. In theory, yes, there's one fewer check required (because div#foo really does need to be a div to match the selector, according to the spec). But the odds of it making any real difference in a real-world browser app? Near zero.

That said, I always cringe when I see things like div#foo in HTML applications. HTML has only one ID-type attribute (id), so there's no need for the further qualification. You make the CSS selector engine (either the browser's or jQuery's) work harder to figure out what you mean, you make the selector fragile (if the div becomes a footer, for instance), etc., and of course you do leave yourself open to a stoopid selector implementation that fails to recognize that it can look something up by ID and then check to see if it's a div and so goes looking through all the divs. (Does such an implementation exist? Possibly, you never know.) Barring some edge cases, it always makes me think someone doesn't quite know what they're doing.

So for me, speed isn't the main argument. Pointlessness is. ;-)

edited Nov 4, 2010 at 9:06

answered Nov 4, 2010 at 9:00

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

deceze Over a year ago

Well, you could have a page with a p#foo and another page with a div#foo, both pages including the same Javascript, and you only want the script to apply to the div#foo... Not that that's a sane script or markup, but just saying... ;o)

T.J. Crowder Over a year ago

@deceze: Absolutely, that would be one of the edge cases I was talking about. (Another being if you wanted to allow advanced HTML-enabled user content on the page, and style it differently depending on whether it was a div or a span, etc.)

fcalderan · Accepted Answer · 2010-11-04 08:53:56Z

2

yes this is faster because of parsing speed and because browser must not check if element is also a <div>. (for a few rules speed difference is not perceivable by the user)

answered Nov 4, 2010 at 8:53

fcalderan

Comments

BoltClock · Accepted Answer · 2010-11-04 09:16:35Z

2

According to this Mozilla article, it does make a difference, although a minute one. (Note that while that article discusses styling XUL user interfaces, the Gecko layout engine is used both for rendering Firefox's user interface and the Web pages it loads.)

The ID is meant to apply to a single element in the DOM anyway, so the performance hit incurred by attempting to match the tag name is completely unnecessary, whether significant or not. Not to mention it would waste a few bytes in your stylesheet as well.

edited Nov 4, 2010 at 9:16

answered Nov 4, 2010 at 8:56

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

2 Comments

T.J. Crowder Over a year ago

The article doesn't back it up with any data, though.

BoltClock Over a year ago

@T.J. Crowder: Yeah, unfortunately. That's as much as I can find for now.

Collectives™ on Stack Overflow

CSS and jQuery Selector Speed

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related