在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

Answer 3

I like to include the tag name if it helps self-document the code. If I can use

$("nav.primary") 

instead of

// this is the primary nav
$(".primary")

I tend to do it.

Answer 4

I guess the best way to get some speed on large pages is to use find instead.

$( your-container ).find("div.active")

Since you always? know where you should look, you can create your own scope. So that the browser only need to search within that area of code.

By the way, you don't need to care about size of the css, EVER :) Use css minifing tools to minimize the css when the site is in production mode. You can also set your web server to automatically gzip your css files before sending the to the user. And if you don't change your css filename on every pageload, the browser cache up to whole css file.

Answer 5

CSS selectors in jQuery used to be optimized similar to how you would do it for browsers, see: http://css-tricks.com/efficiently-rendering-css/

Specifying a generic tag anywhere, even with an ID or class would be dramatically slower than just specifying the ID or class alone. See:

http://www.no-margin-for-errors.com/demos/how-to-optimize-jquery-selectors/

The above uses jQuery 1.3. Since jQuery 1.4 and the introduction of the Sizzling selector engine, this is less important from what I understand. See:

http://hungred.com/useful-information/jquery-optimization-tips-and-tricks/

For myself, I decided in CSS to use whatever reads the easiest, and I am more specific there since that is only parsed once. In jQuery, however, I have been more careful since those selectors could run thousands of times over the life of a page.