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毫秒

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

和平！

Answer 5

当然getElementById更快但是使用jQuery你可以做很多事情。

为了测试它，您可以尝试每次循环10k次，并比较之前和之后的时间戳。

Answer 6

原生getElementById更快。 Jquery选择器引擎只是为任何#x选择器包装它。

使用firebug控制台，您可以通过以下方式分析jquery。不确定它是否适用于本机api调用，如getElementById。

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

Answer 7

嘿。研究这个问题我找到了这篇优秀的帖子。还有一篇关于这个的帖子，最新的关于JQuery的学习网站，提供了优化速度的具体技巧！

值得注意的是，使用最新的DOM规范，您可能不必担心性能。只有当你创造（或发现）瓶颈时。

Optimise Selectors

Answer 8

由于此页面中链接的其他性能测试似乎已被打破，并且它还包含了在此问题中未被询问的内容（即自定义jQuery方法），因此我决定制作一个新的性能基准来回答包含jQuery中的确切等价物（返回DOM元素）的问题，而不是自定义方法：

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

当我在Chrome中运行它时，它会显示一个直接的jQuery

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

比标准JavaScript中的等效操作慢92％

document.getElementById('foo')

我还尝试了目前标记为已接受答案的内容，据称这些答案要快得多＃34;但它仍比标准的JavaScript等价物慢89％：

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

随意为自己运行它，并使用我制作的performance benchmark查看您在浏览器中获得的内容。没有jQuery的版本似乎要快得多。

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

8 个答案: