Fastest selector method in jquery and CSS - ID or

问题:

What is fastest in jquery/javascript?

$('#myID .myClass')

or

$('.myClass')

What is best to use in CSS?

#myID .myClass{}

or

.myClass{}

I see now that I should have explained better. Sorry!

Ofceauce ID is a faster selector in both CSS and JavaScript. But some times you need to use class since there are multiple selectors.

Say forexample that I have i BIG html document. In the middle of the page I have:

<div id="myID">

<a class="myClass">link1</a>

<a class="myClass">link1</a>

<a class="myClass">link1</a>

</div>

If I want to target all "myClass". Would it then be better to target the ID before targeting the classes? (then I wouldn't have to do domtravel of the entire HTML document) Eg.:

Would this:

$('#myID').find('.myClass')

Be faster than:

$('.myClass')

回答1:

My testing on modern browsers suggests that you should go with either,

$('#id').find('.class') // or
$('.class')

but not,

$('#id .class')

Reason being that all modern browsers implement getElementsByClassName resulting in almost-constant time lookups by class name (assuming a hash implementation). Which browsers are modern is another subjective question.

回答2:

They're roughly the same in most modern browsers since class-names are hashed internally. The difference is that older browsers don't have a .getElementsByClassName or equivalent method, so .myClass is parsed internally to jQuery and EVERY element in the dom is walked and checked for the classname (or it uses XPath when possible).

Always try to use #myID .myClass when possible as it allows jQuery to jump directly to #myID and traverse from there when necessary.

回答3:

Let's just think logically about this for a second, and pretend that you didn't know anything about how a browser is built internally or how it accesses the DOM, but you assume that whatever it does is logical.

Therefore, doesn't it stand to reason that out of two selectors, the narrowest one would find you results faster?

You have two selectors, which translate to rough english as

1. Any element of the class myClass that is a child of the element with ID of myID
2. Any element of the class myClass

As for "What is best to use in CSS", this is completely subjective as it depends if you are intending to target all instances of .myClass or just those that are children of #myID.

回答4:

Good question actually.

Say you have parsed DOM of N elements of max depth of D and CSS of S number of rules. Then the task of finding styles for all elements has computational complexity of roughly O(N*D*S).

Obviously not all of CSS selectors has the same computation complexity.

For example li.item selector and li[class ~= "item"] require exactly the same CPU resources as they are equivalents. li[class = "item"] can be computed faster as it does not require scan of white spaces.

#1 selector here:

#myID .myClass{} /* #1 */
.myClass{} /* #2 */

require more CPU resources as you need to do exactly the same amount of work as in case #2 plus you will need to scan parent/child chain (of max D elements) to find the element with "myID".

That is all about pure CSS selectors.

In jQuery & friends situation can be a bit different. Theoretically jQuery engine can use document.getElementById() to minimize the lookup set (so reduce the N number) but that will not match CSS behavior. Here is an example: http://jsfiddle.net/dnsUF/ . Here jQuery reports one element with #foo but there two such elements in fact.

Resume:

• In CSS case #2 is faster
• In jQuery case #1 can be faster (but technically may not be correct in CSS sense).

Here is my article about CSS selector complexity: http://www.terrainformatica.com/2008/07/csss-and-computational-complexity-of-selectors/ And this one of how to improve it by using style sets: http://www.terrainformatica.com/2010/09/style-sets-in-h-smile-core/

回答5:

IDs will always be the fastest way to access an element, since they are unique.

回答6:

Yeah, id is one of the fastest method to access element. Check it out this test http://mootools.net/slickspeed/.

回答7:

#myID .myClass is definitely a better way to access the element assuming you have many elements to which the .myClass is applied.

回答8:

Update - 2015 - Check yourself here
https://jsperf.com/id-vs-class-vs-tag-selectors/2

TL;DR;

Using ID $("#foo") is almost 4x faster than CSS $(".bar") on my chrome 41 on linux 64bits