0

For an DIV element, I'm wondering which of these selectors likely to be faster 

$("#ELEMENT_ID")
$('div[id="ELEMENT_ID"]')

is there any difference in performance between using the DIV id only or limiting search to DIV elements only with its ID?

Ahmed Atia
  • 17,848
  • 25
  • 91
  • 133
  • 5
    i fear not of performance. i'd rather worry about readability as well as the use of CSS convention of targeting ID'ed elements. – Joseph Apr 21 '12 at 10:57
  • 1
    If you want to limit selection by only divs why don't you use `div#id` instead? – zerkms Apr 21 '12 at 10:58
  • http://stackoverflow.com/questions/1245598/jquery-standards-and-best-practice – Govind Malviya Apr 21 '12 at 10:59
  • @zerkms IDs appear once per page. i think there is little need to target the element (unless the ID serves other elements and the same CSS is used, or maybe specificity) – Joseph Apr 21 '12 at 11:00
  • 3
    Can I just say '[JS Perf](http://jsperf.com).' Try it yourself. – David Thomas Apr 21 '12 at 11:01
  • @Joseph: so what? What if there is a `span` with id = `id` and you need to select it only if it is a `div`? – zerkms Apr 21 '12 at 11:01
  • @DavidThomas Tried it .. #id without the tag name in advance is faster .. a *lot* faster – Ahmed Apr 21 '12 at 11:14
  • If you want to see it go *really* fast, try `document.getElementById`. Since each ID is supposed to appear only once, this is usually implemented by the UA as a hash map, giving very good performance. It is much faster than querySelectorAll, which is what Sizzle/jQuery uses internally. Naturally, querySelectorAll will not be able to perform your second query as quickly as your first, as it has more restrictions to check. – Dagg Nabbit Apr 21 '12 at 11:38

3 Answers3

4

or limiting search to DIV elements only with its ID?

Please note that IDs are unique, so if you are using one ID on more than one element, that is the wrong thing to do.

div[id="ELEMENT_ID"] and even div#ELEMENT_ID are generally superfluous, unless you are including a stylesheet across multiple pages, and different pages use the one ID for different elements. Doing that probably isn't a good idea though, as it will probably confuse someone reading the code.

Delan Azabani
  • 79,602
  • 28
  • 170
  • 210
  • Agree with most but what do you mean by `superfluous`? – zerkms Apr 21 '12 at 10:59
  • 'superfluous' means 'unnecessary'. – Delan Azabani Apr 21 '12 at 11:00
  • why do you think it is unnecessary? What if you need to select `ELEMENT_ID` **only** if it is a `div`? – zerkms Apr 21 '12 at 11:01
  • 3
    It is possible that the same id could be applied to elements of different types on different pages that import the same JavaScript (although this wouldn't generally be a good idea). – Quentin Apr 21 '12 at 11:01
  • "although this wouldn't generally be a good idea" --- exactly, and it doesn't mean it is superfluous in every case ;-) – zerkms Apr 21 '12 at 11:02
  • 1
    Hmm, I hadn't thought of that, so it's not *always* superflous. Then again, I don't really think doing so is a good idea, that is, repurposing an ID for different types of elements on different pages. – Delan Azabani Apr 21 '12 at 11:03
  • @Delan Azabani: indeed it is not a good idea, but `By definition, IDs are unique ... Therefore, div[id="ELEMENT_ID"] and even div#ELEMENT_ID are superfluous.`. First clause is not enough to state second and use `therefore`. By definition :-) – zerkms Apr 21 '12 at 11:05
  • @DelanAzabani I would agree that stating the tag name before the id is *not* necessary, however, this is not what the OP is trying to find out .. The question is not about which is better/readable? the question is about which one is faster! And according to Jasuten's link http://jsperf.com/id-vs-data-id/4 .. the first is **much much** faster. -1 – Ahmed Apr 21 '12 at 11:18
  • Mark Delan's answer as 'answer'. In CSS & jQuery both, there's no use of div[id="ELEMENT_ID"] div#ELEMENT_ID and also both will be slow. Use #ELEMENT_ID instead. – Jashwant Apr 21 '12 at 11:21
3

Checking on jsPerf shows that just the id selector is much faster. http://jsperf.com/id-vs-data-id/4

Jasuten
  • 1,570
  • 12
  • 20
2

For #ID and div#ID selectors, jQuery mentiones that:

For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle, jQuery performs an additional check before identifying the element as a match.

For div[ID=something] selector I am not really sure but I doubt if it would be any faster than #ID. I would run a performance benchmark and check the results.

PS: there is an interesting note on jQuery ID selector page:

As always, remember that as a developer, your time is typically the most valuable resource. Do not focus on optimization of selector speed unless it is clear that performance needs to be improved.

Salman A
  • 262,204
  • 82
  • 430
  • 521
  • 1
    I know little about jQuery, but does it really do everything manually? Does it not detect the presence of `querySelectorAll` and use it when available and the selector is complex? It'd be faster that way, as it's likely implemented in native code, though questions may arise about possible implementation inconsistencies. Then again, regardless of if it uses native code or not, it'll be slower. – Delan Azabani Apr 21 '12 at 11:09
  • @Delan: yes, I am not sure what jQuery/sizzle/querySelectorAll do behind the scenes so perhaps I should edit my answer. – Salman A Apr 21 '12 at 11:14
  • Are you sure Sizzle is using gEBI behind the scenes? I perf tested this recently and it was orders of magnitude slower. – Dagg Nabbit Apr 21 '12 at 11:48
  • @DelanAzabani qSA is pretty slow. Many fairly complex queries can be done faster using getElementById, etc. For example if the second-to-last compound selector in the full query string has an "id" clause, and the last compound selector is a tag name, then doing gEBI, iterating through parent nodes checking the selectors to the left, and then doing getElementsByTagName and returning the result is actually a good bit faster than qSA. qSA also fails to make other obvious optimizations, like taking into account that there is only one `body` element. – Dagg Nabbit Apr 21 '12 at 11:57