jquery, performance-wise what is faster getElement

问题:

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

回答1:

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.

回答2:

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.

回答3:

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.

回答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!

回答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.

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

回答7:

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

回答8:

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.