CODEWITHSUNDEEP
javascriptjqueryperformancejquery-selectors
DooDoo
DooDoo

Reputation: 13447

Performance of jQuery Selectors with ID

I know in jQuery if we use ID to select elements,it's so efficient.I have a question about this selectors:

please consider this 3 selectors:

$('#MyElement')

$('#Mytbl #MyElement')

$('#Mytbl .MyClass')

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

Upvotes: 7

Views: 4300

Answers (9)

Rahul
Rahul

Reputation: 988

Obviously the first one, $("#MyElement") is faster than other 2.
Accessing an element with its id always faster but sometimes we had to find some element in some container. In that case we prefer .find() or .filter() (depending upon situation).
The difference between selectors depends on browser to browser. e.g. if you access through class on IE it would be slower than FF. FF is faster when accessing an element with class rather than ID.

In your second example, i.e. $("#mytbl #MyElement"), here you are finding #MyElement under #mytbl which is legal but not appropriate way. Since you already know the ID of the element (assuming you have only one element with this id on your page) so its better to use $("#MyElement"). $("#mytbl #MyElement") will read #mytbl first and traverse to find #MyElement under it hence time consuming and slow.

To test different cases you can write small snippet to read/access atleast 10000 elements in a loop otherwise it would be hard to determine which way is faster.

Upvotes: 1

AlexanderBrevig
AlexanderBrevig

Reputation: 1987

Also, if you need nested selectors, it's 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.

Upvotes: 2

Cerbrus
Cerbrus

Reputation: 72857

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

document.getElementById("MyElement")

is even faster, though. It's native javascript, and unlike jQuery, the browser immediately knows what you want to do, instead of having to run through a load of jQuery code to figure out what it is you're looking for, in the first place.

You can use jsPerf to run a speed test, to compare the 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

Like expected, the native getter is the fastest, followed by the jQuery getter with only 1 selector at less than 10% of the native speed. The jQuery getters with 2 parameters don't even get close to the operations per second of native code, especially the class selector, since classes are usually applied to multiple elements, compared to ID's. (Native ID selectors stop searching after they've found one element, I'm not sure if jQuery does, too.)

Upvotes: 5

Levi Botelho
Levi Botelho

Reputation: 25214

A couple things:

  • More selectors = slower search. If you can get your desired result with fewer predicates, do so.
  • Getting an element by ID is quicker than getting by a class. getElementById is a core function of JavaScript that is heavily optimised because it is used so frequently. Leverage this when possible.
  • The space selector (' ') is much more costly than the child selector ('>'). If you can use the child selector, do so.

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

Upvotes: 3

ahren
ahren

Reputation: 16961

A direct ID selector will always be the fastest.

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

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

Selecting nested ID's is just wrong, because if an ID is unique (which it should be), then it doesn't matter if it's nested or not.

Upvotes: 10

silly
silly

Reputation: 7887

this is the way to stop times 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 not efficient, if you have a domid select this directly: $('#MyElement')

Upvotes: 5

Mihai
Mihai

Reputation: 2760

I would say that the first one is the fastest because you're simply searching for one id.

And 

$('#Mytbl .MyClass')

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

Upvotes: 0

AlexStack
AlexStack

Reputation: 17381

Here you are. See the comments on top 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 just the id (like the first example) but if you have to have multiple selectors and classes chained together, try to put the most strict one at the right. For example an id. Because JQuery interprets selectors from right to left.

Upvotes: 2

Akhil Sekharan
Akhil Sekharan

Reputation: 12683

The fastest will be:

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

because in this case, jquery don't have to search the whole dom tree to find '#Mytbl'. It will search in the scope given only. IE it will serach in '#MytblContainer' only .

Upvotes: 0

Related Questions