1

I have been taking a look on some sites and they all talk about using tag selectors instead of classes to improve the performance.

For example, this:

$("input.myclass");

Instead of this:

$(".myclass");

For example:

They all claimed that JavaScript only had getElementById and getElementsbyTagName and not a way to select classes directly.

Has this changed in the last 3 years? Are they now able to select by class? I was testing it with jsperf and it seems the class selector is faster by far: http://jsperf.com/class-vs-input

I also took a look at other's people testings and show the same results: http://jsperf.com/selectors-perf/3

Has this changed in these last year? Should we now select by class rather than by tags? Where can I take a look at the browsers' versions implementing natively the class selector?

Thanks.

Community
  • 1
  • 1
Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • Your first jsperf is completely unrelated. Those selectors are not comparable at all. The selectors you were supposed to use were `$(".demo")` and `$("input.demo")`. `:checkbox` is a jQuery pseudo selector and is not efficient. If anything, you should've used `[type="checkbox"]`. Outside of efficiency, I think an important thing to consider when doing this is that sometimes you don't want **all** elements of a certain class, you just want the ones that satisfy a certain condition (like inside a div) – Ian Jun 17 '13 at 14:17
  • I think you must have a look at this if u think `input.class` is better than `.class`.. http://jsperf.com/jquery-standards-over-qualified-selectors/2 Please realise that the search is done from right to left and so you'd only be over qualifying it you use `input` and `.class` together :) – krishwader Jun 17 '13 at 14:21
  • @passionateCoder I don't think is faster, I am asking if this has changed in the last few years because in the past people was saying the opposite. – Alvaro Jun 17 '13 at 14:24
  • @Ian thanks for the info but, then, still being faster a class selector compare to a a class inside a tag selector in opposition to the links I posted? – Alvaro Jun 17 '13 at 14:25
  • @Steve No I understand, I was just trying to point out that the first jsperf wasn't exactly "fair". Your second jsperf (and the other commenter's jsperf) make more sense, and definitely show simple selectors are faster. I think in the past few years, the use of Sizzle (the selector "engine" jQuery uses at times) has gone down, in favor of native DOM methods. Sizzle is somewhat inefficient (yet very reliable and consistent), so it might've worked better for searching in older browsers and you wouldn't have such a difference between `.test` and `input.test` – Ian Jun 17 '13 at 14:29

1 Answers1

2

It has changed now.

Most of the browsers are implementing :

var matches = document.body.querySelectorAll('div.highlighted > p');

Inside their implementation in javascript.

That's what jQuery uses inside now; It is implementing sizzle.js, a selector js library that chooses whether to use querySelector or the regular getElementsByTagName function;

For example, for the jquery constructor function $() if the first argumemt is a string : $(iAmAString), then if the first letter of the string is a #, jquery will call document.getElementById(iAmAString.substr(0)). If not it will let sizzle handle whether calling querySelector depending on the browser's compatibility and the complexity of the string.

and lots of other awesome things.

Being the most precise when selecting your element, using base functions and caching your frequently used selectors, will reduce the number of checks when passing through this big chain and/or even circumvent the whole chain.

For some websites, this had the particular effect of generating a unicorn riding kitten effect of awesomeness, what more to say:

the compatibiity support is here https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelectorAll

Abdoul Sy
  • 580
  • 3
  • 10