3

I just ran this jsPerf test in Chrome 18 and found that .class performs significantly better than tag.class despite the myriad of resources that say otherwise. I know this questions was recently asked on SO but without a definitive / satisfactory answer other than "don't use jQuery". Can someone shed some light on the latest best practices?

NOTE: Assume clarity and semantics are taken care of (e.g. I have a class on an anchor tag called item-link it's going to come off just as clear with a.item-link as it will .item-link).

Community
  • 1
  • 1
acconrad
  • 3,201
  • 1
  • 22
  • 31
  • 2
    I knew this day would come... web developers have got to **stop** coding for performance first and clarity second. That's a job for browser developers, GPU developers, kernel developers and computational scientists. – BoltClock May 14 '12 at 19:49
  • It depends on what you're trying to do and the DOM struture... – gdoron May 14 '12 at 19:50
  • @BoltClock Okay well assume clarity is already taken care of. If I have a class called `item-link` it's going to come off just as clear with `a.item-link` as it will `.item-link` but the latter is selected nearly twice as fast...I wouldn't be asking the question if clarity wasn't already taken care of, and I work on a real-time front end-heavy app so performance does matter to me. – acconrad May 14 '12 at 19:57
  • Funny thing, in my bowser (opera 11.64) the selector tag.class performs better and only specifying .class is even the slowest. Now you will have to ask yourself the question: is it really worth the trouble trying to improve this performs? Even better: probably every browser will give you a different benchmark, so you might have to add a lot of overhead to pick the best case for each browser. Conclusion: don't worry too much about this. – Styxxy May 14 '12 at 19:58

2 Answers2

4

You're asking about best practices, so I would lean more toward the way that is more readable vs. one that can possibly shave a microsecond off your script runtime.

Zeleres
  • 170
  • 3
  • 10
  • And regarding the debate readable or not, I am not sure what you stand to gain by knowing that the selector is on an what type of control, if that is what you need then well name your classes better for gods sake..What next precede ids with tagname?? :/ – Baz1nga May 14 '12 at 19:59
1

The latest browsers have a better implementation of getElementsByClassName and hence when you use jquerys class selector only it immediately fallsback to this method and hence the performance difference and gain.

When you precede it with a tag selector firstly jquery needs to process your selector and then break it down to the different tokens and then it goes about searching for the control, not sure what order is followed here, whether all elements with the className is retrieved first and then the additional selector is applied or vice versa but I am sure you can research it by looking at the jquery source code..

And regarding the debate readable or not, I am not sure what you stand to gain by knowing that the selector is on an what control, if that is what you need then well name your classes better for gods sake..What next precede ids with tagname?? :/

Baz1nga
  • 15,485
  • 3
  • 35
  • 61
  • Do you have a source for that? I don't say it isn't correct, I just like to see the source to go with claims. – PeeHaa May 14 '12 at 19:54