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

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



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.


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.


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.


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;

for(var i=0; i < 1000000; i++)
   if($(document.getElementById("test")).css('opacity') == '0.2')
       $(document.getElementById("test")).css('opacity', '1');
      $(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;

for(i=0; i < 1000000; i++)
   if($("#test").css('opacity') == '0.2')
       $("#test").css('opacity', '1');
      $("#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");

for(i=0; i < 1000000; i++)
   if(elem.css('opacity') == '0.2')
       $(elem).css('opacity', '1');
      $(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!



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.


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.


Heh. Researching this question I found this excellent post. And Also a post about this with the latest into on JQuery's learning site with specific tips to optimise speed!

Worth noting that with the latest DOM specification, chances are you need not worry about performance in general. Only when you have created (or discover) a bottleneck.

Optimise Selectors


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:


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


is 92% slower than the equivalent operation in standard JavaScript


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.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.