Performance of jQuery Selectors with ID

Question

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:

Answer 1

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.)