jquery, performance-wise what is faster getElement

Question

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

Answer 1

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 2

If you are concerned about performance, native getElementById is much much faster, but jQuery gives you very handy access to a lot of stuff. So, you might want to use something like :

$( document.getElementById("some_id") ).jQueryCall();

This will give you a better performance, and at the same time, allow you to use jQuery.

Answer 3

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 4

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();

Answer 5

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 6

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!