jquery, performance-wise what is faster getElementById or jquery selector?

Question

What is better from performance wise document.getElementById(\'elementId\') or $(\'#elementId\') ? How can I calculate the speed by myself?

Answer 1

getElementById is faster, because it uses native code. The jQuery selector will also use getElementById, but it first needs to do a lot of tests and comparisons on the text.

Answer 2

Use http://jsperf.com/ if you want to test any kind of performance between jquery and dom but jquery is normaly slower with everything since it is based on the dom.

Answer 3

Since the other performance test that was linked in this page seemed to be broken, and it also included something that wasn't asked about in this question (namely a custom jQuery method), then I decided to make a new performance benchmark to answer the question which includes the exact equivalent (returns the DOM element) in jQuery, instead of a custom method:

https://jsperf.com/jquery-get-0-vs-get-element-by-id

When I run it in my Chrome, it shows that a straight jQuery

$('#foo').get(0) 

is 92% slower than the equivalent operation in standard JavaScript

document.getElementById('foo')

I also tried out what is currently marked as the accepted answer here, which supposedly "much much faster" but it is still 89% slower than the standard JavaScript equivalent:

$( document.getElementById("foo") ).get(0);

Feel free to run it for yourself and see what you get in your browser, with the performance benchmark that I made. The version with no jQuery seems to be a lot faster.

Answer 4

I've just stumbled upon this post whilst wondering the same question... so decided to knock up a quick test script... run it, try it yourself, blew my mind!

var now = Date.now();
var diff = 0;
console.log(now);

for(var i=0; i < 1000000; i++)
{
   if($(document.getElementById("test")).css('opacity') == '0.2')
       $(document.getElementById("test")).css('opacity', '1');
   else
      $(document.getElementById("test")).css('opacity', '0.2');
}

diff = Date.now() - now;
console.log('With $(document.getElementById("test")).somejQueryCall(): ' + diff + ' milliseconds');

////////////////////////////////////////////////////////////////////////

var now2 = Date.now();
var diff2 = 0;
console.log(now2);

for(i=0; i < 1000000; i++)
{
   if($("#test").css('opacity') == '0.2')
       $("#test").css('opacity', '1');
   else
      $("#test").css('opacity', '0.2');
}

diff2 = Date.now() - now2;

console.log('With $("#test").somejQueryCall(): ' + diff2 + ' milliseconds');

////////////////////////////////////////////////////////////////////////

var now3 = Date.now();
var diff3 = 0;
var elem = $("#test");
console.log(now3);

for(i=0; i < 1000000; i++)
{
   if(elem.css('opacity') == '0.2')
       $(elem).css('opacity', '1');
   else
      $(elem).css('opacity', '0.2');
}

diff3 = Date.now() - now3;

console.log('With $(elem).somejQueryCall(): ' + diff3 + ' milliseconds');

After running this script, I got the following results:

Run 1

With $(document.getElementById("test")).somejQueryCall(): 552 milliseconds

With $("#test").somejQueryCall(): 881 milliseconds

With $(elem).somejQueryCall(): 1317 milliseconds

Run 2

With $(document.getElementById("test")).somejQueryCall(): 520 milliseconds

With $("#test").somejQueryCall(): 855 milliseconds

With $(elem).somejQueryCall(): 1289 milliseconds

Run 3

With $(document.getElementById("test")).somejQueryCall(): 565 milliseconds

With $("#test").somejQueryCall(): 936 milliseconds

With $(elem).somejQueryCall(): 1445 milliseconds

I can't believe the difference!!! Just had to share this!

Peace!

Answer 5

Of course getElementById is faster but with jQuery you can do lots of things.

To test that, you can try to loop 10k times for each, and compare timestamps before and after.

Answer 6

The native getElementById is faster. Jquery selector engine just wraps this for any #x selectors.

Using the firebug console you can profile jquery in the following way. Not sure it works well for native api calls like getElementById.

console.profile();
$('#eleId');
console.profileEnd();