Most efficient way to use selectors in jQuery?

Question

is it more efficient to use $('.active') or $('div.active') ? I have always avoided including "div" because it's extra text in the javascript file I don't want the user to have to download.

Answer 1

Older versions of IE will benefit from the inclusion of div because they don't support getElementsByClassName().

Because of that, every element on the page needs to be selected with:

document.getElementsByTagName('*');

...and manually tested to see if it has the active class.

If you include div, then it is able to narrow it down a bit, since it can do:

document.getElementsByTagName('div');

...then test only those elements.

When I say older versions, I mean IE6 and IE7 since IE8+ supports querySelectorAll.

---

EDIT:

Browser suppport:

• getElementsByClassName: http://www.quirksmode.org/dom/w3c_core.html#t11
• querySelectorAll: http://www.quirksmode.org/dom/w3c_core.html#t13

Answer 2

It depends. If you mean performance. I prepared special test for everyone on JSPerf: jquery class selector test. On my browser and computer (FF 3.6.13 and Core 2 Duo 1.6) div.active is a bit slower. But found it variable - it seems GC has something doing here.

And after few more tests it seems that div.active:

• Speed is variable on FF, sometimes GC turns on 'div.active' test, but generally difference is very small.
• Unnoticable difference on Chrome and Safari
• Faster on IE9