jquery,性能方面什么是更快的getElementById或jquery选择器？

Question

表现明智document.getElementById('elementId')还是什么更好$('#elementId')？我怎样才能自己计算速度？

Answer 1

如果你担心性能,本机getElementById要快得多,但是jQuery可以让你非常方便地访问很多东西.所以,你可能想要使用类似的东西:

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

这将为您提供更好的性能,同时允许您使用jQuery.

Answer 2

getElementById更快,因为它使用本机代码.jQuery选择器也将使用getElementById,但它首先需要对文本进行大量测试和比较.

Answer 3

如果你想在jquery和dom之间测试任何类型的性能,请使用http://jsperf.com/但是jquery对于所有内容都要慢,因为它基于dom.

Answer 4

我只是偶然发现了这个帖子,同时想知道同样的问题...所以决定敲一个快速的测试脚本......运行它,亲自尝试,吹响我的想法!

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

运行此脚本后,我得到以下结果:

运行1

使用$(document.getElementById("test")).somejQueryCall():552毫秒

用$("#test").somejQueryCall():881毫秒

用$(elem).somejQueryCall():1317毫秒

跑2

用$(document.getElementById("test")).somejQueryCall():520毫秒

用$("#test").somejQueryCall():855毫秒

用$(elem).somejQueryCall():1289毫秒

跑3

用$(document.getElementById("test")).somejQueryCall():565毫秒

使用$("#test").somejQueryCall():936毫秒

用$(elem).somejQueryCall():1445毫秒

我无法相信差异!只是分享这个!

和平!