0

Say I'm selecting a DOM element using CSS or jQuery, is it faster to provide a higher resolution?

That is, I'm trying to figure out which one of the following jquery selector methods is the best in terms of speed:

Method 1. $("#name")
Method 2. $("input#name")
Method 3. $("div input#name")

Or these CSS selectors:

Method 1. #name {font-weight: bold;}
Method 2. input#name {font-weight: bold;}
Method 3. div input#name {font-weight: bold;}

It seem like Method 3 might make the selector's job easy since it can narrow down to the element faster?

Nitin Nain
  • 5,113
  • 1
  • 37
  • 51
  • possible duplicated question: https://stackoverflow.com/questions/34100018/selector-for-best-performance-in-jquery – Chris Chen Nov 06 '19 at 04:43
  • it's depend on the case you use. Since jQuery is a library, you can ignore this part. – abramhum Nov 06 '19 at 05:18
  • @ChrisChen the question you linked is about order of CSS selectors, my question is whether one method is more optimized than the other. – Nitin Nain Nov 06 '19 at 05:21
  • @NitinNain, I believe the performance was the main discussion point on that question. As per answer provided by jfriend00, the shortest jQuery selector is the fastest while vanilla js still beat them all. – Chris Chen Nov 06 '19 at 05:25
  • Ah you're right. Sorry I was looking at another question that was also showing up as possible duplicate - https://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css – Nitin Nain Nov 06 '19 at 05:28

2 Answers2

2

Considering these jQuery statements 

Method 1. $("#name")
Method 2. $("input#name")
Method 3. $("div input#name")

all the three statements are equally good since id always need to be an unique value. So $("#name") is same as $("div input#name") unless dom have multiple field with same id

Now considering the css lines, it depends on the specificity.

#name { color: red; }
input#name { color: yellow; }
div input#name { color: green; }
<div>
  <input id='name'>
</div>
Nitin Nain
  • 5,113
  • 1
  • 37
  • 51
brk
  • 48,835
  • 10
  • 56
  • 78
  • 1
    According to your snippet, the more precise the selector is faster. I thought at first you were just overriding the style with each new statement, but if you move `#name { color: red; }` to the last position, it still will be green showing. If you remove the green selector completely, then yellow will be showing. – pensum Nov 06 '19 at 04:55
  • 2
    `Faster` may not be actually mean anything here , but `Specificity` is more regarderd term. Here color `green` is overriding because the style is more specific as the input is inside a `div` element – brk Nov 06 '19 at 05:01
  • Ah! It's my lack of vocabulary in english that made me misinterpret your answer. Thanks for the explanation. – pensum Nov 06 '19 at 05:03
0

I think the smaller the selector better the performance. I vaguely remember reading somewhere that the selectors are evaluated from right to left. So, the last sub-selector is evaluated first and the resulting list will then be condensed as it moves left. If you are worried about a certain instance you can always check the performance of that particular instance by measuring the time between before and after of either querySelctorAll() or $() by passing the possible selectors and see it yourself.

Aditya
  • 771
  • 5
  • 11