Geek Answers Handbook

JQuery id selectors performance

I know in jQuery that if we use an ID to select elements, it is so efficient. I have a question about these selectors:

consider this 3 selectors:

 $('#MyElement') $('#Mytbl #MyElement') $('#Mytbl .MyClass')

which one is faster and why? How can I check the elapsed time to select my item in jQuery?

+7
source share
9 answers

The direct ID selector will always be the fastest.

I created a simple test case based on your question ...

http://jsperf.com/selector-test-id-id-id-id-class

The choice of a nested identifier is simply incorrect, because if the identifier is unique (what it should be), then it does not matter whether it is nested in it.

+10
source

The first one is the fastest, simply because it has only one property to look for. Nevertheless,

 document.getElementById("MyElement")

even faster. This is native javascript, and unlike jQuery, the browser immediately knows what you want to do, rather than starting to download jQuery code to find out exactly what you are looking for in the first place.

You can use jsPerf to run a speed test to compare functions: test case . Results:

 $('#MyElement') Ops/sec: 967,509 92% slower $('#Mytbl #MyElement') Ops/sec: 83,837 99% slower $('#Mytbl .MyClass') Ops/sec: 49,413 100% slower document.getElementById("MyElement") Ops/sec: 10,857,632 fastest

As expected, the built-in getter is the fastest, followed by a jQuery getter with 1 selector less than 10% of its own speed. Two-parameter jQuery recipients don't even get close to the operations per second of their own code, especially the class selector, since classes usually apply to multiple elements compared to identifiers. (The original selector identifiers stop the search after they find one element, I'm not sure if jQuery is either.)

+5
source

This is a way to stop time between some javascript calls

 selectorTimes = []; var start = new Date().getTime(); $('#MyElement') selectorTimes.push(new Date().getTime()-start); start = new Date().getTime() $('#Mytbl #MyElement') selectorTimes.push(new Date().getTime()-start); start = new Date().getTime() $('#Mytbl .MyClass') selectorTimes.push(new Date().getTime()-start); console.log(selectorTimes);

I think the second selector is ineffective, if you have a domid, select this directly: $ ('# MyElement')

+5
source

There you are. See comments at the beginning of each example:

 //fastest because it is just one id lookup: document.getElementById("MyElement") with no further processing. $('#MyElement') //a little slower. JQuery interprets selectors from right to left so it first looks up for #MyElement and then checks if it is hosted in #Mytbl $('#Mytbl #MyElement') //the slowest of all. JQuery interprets selectors from right to left so it first finds all elements with .MyClass as their class and then searches for those hosted in #Mytbl. $('#Mytbl .MyClass')

If you can, always use only the identifier (like the first example), but if you need to have several selectors and classes connected together, try to put the strictest one on the right. For example, an identifier. Since jQuery interprets selectors from right to left.

+2
source

A few things:

  • More selectors = slow search. If you can get the desired result with fewer predicates, do it.
  • Getting an element by identifier is faster than getting a class. getElementById is a core JavaScript function that is highly optimized because it is used so often. Use it whenever possible.
  • The space selector ('') is much more expensive than the child selector ('>'). If you can use a child selector, do this.

These rules apply to CSS, as do JavaScript and jQuery.

+2
source

Also, if you need nested selectors, it is faster to use $ (). find (). find ()

http://jsperf.com/selector-test-id-id-id-id-class/2

 $('#Mytbl .MyClass') $('#Mytbl').find('.MyClass')

The latter is about 65% faster.

+2
source

Obviously the first, $("#MyElement") faster than the other 2.
Access to an element with its identifier has always been faster, but sometimes we had to find some element in some container. In this case, we prefer .find() or .filter() (depending on the situation).
The difference between selectors is browser and browser dependent. for example, if you access through a class in IE, it will be slower than FF. FF is faster when accessing an element with a class, not by ID.

In your second example, i.e. $("#mytbl #MyElement") , here you find #MyElement under #mytbl , which is legal but not appropriate. Since you already know the identifier of the element (if you have only one element with this identifier on your page), it is better to use $("#MyElement") . $("#mytbl #MyElement") will first read #mytbl and move around to find #MyElement below it, which is time consuming and slower.

To test different cases, you can write a small fragment for reading / accessing at least 10,000 elements in a loop, otherwise it would be difficult to determine which path is faster.

+1
source

The fastest will be:

  $('#Mytbl', '#MytblContainer' );

because in this case jquery does not need to search the entire dom tree to find '#Mytbl'. He will only perform searches in that volume. IE, it will only load in #MytblContainer.

0
source

I would say that the first one is the fastest because you are just looking for one identifier.

AND

 $('#Mytbl .MyClass')

is the slowest because you are not specifying the type of element that the class "MyClass" has

0
source

More articles:


All Articles