jQuery，就性能而言，getElementById和jQuery选择器哪个更快？

Question

在性能方面，document.getElementById('elementId')和$('#elementId')哪个更好？如何自己计算速度？

- Ahmed Magdy

Answer 1

如果您关心性能，使用原生的getElementById要快得多，但是jQuery可以让您很方便地访问许多内容。因此，您可能需要使用类似于：

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

这将提供更好的性能，并且同时允许您使用jQuery。

- jeffreyveon

---

我不确定我会停止在心里感谢你向我展示那个... :) - VoidKing

我知道这很老了，但你能详细说明一下吗？我找不到这个jQueryCall()方法。谢谢。 - victor

@victor - jQueryCall() 只是任何常规 jQuery 函数的占位符。例如，要获取 ID 为 foo 的元素的宽度，可以执行以下操作：$( document.getElementById('foo') ).width() - jeffreyveon

太棒了！不知道你能做到这个。 - Barry

这似乎比直接使用jQuery版本稍微快一些，但是问题中并没有要求使用自定义方法。此外，根据我创建和运行的性能基准，它似乎比标准JavaScript等效代码慢了89%。欢迎您自己运行一下试试？ https://dev59.com/D3I-5IYBdhLWcg3wbX1N#46286422 - Uniphonic

Answer 2

getElementById更快，因为它使用本地代码。jQuery选择器也会使用getElementById，但它首先需要对文本进行大量的测试和比较。

- Marius

---

+1. 同时，速度差异取决于使用方式。如果只是对它们之一进行单次调用，则几乎不会有任何差异。如果在循环或递归中多次调用数百或数千次，您可能会注意到jQuery选择器稍微慢一些。 - anon355079

Answer 3

如果你想测试jQuery和DOM之间的性能，可以使用http://jsperf.com/。但是由于jQuery基于DOM，所以在所有操作中，通常速度都会比较慢。

- Marcio

---

你的链接已经失效了，这个网址有同等的内容：http://jsperf.com/getelementbyid-vs-jquery-id/44 - Timtim

@TyrionGraphiste 很抱歉，截至今天您的链接也无法进行测试。它显示 $ 未定义。 - Haradzieniec

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

这差异太大了！必须和大家分享！

平安！

- An0nC0d3r

---

使用$("div#test").somejQueryCall()：2942毫秒 与 $(document.getElementById("test")).somejQueryCall(): 1822毫秒相比。但编写无错误的代码比速度更重要。 - ejectamenta

Answer 5

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

为了测试，您可以尝试对每个函数进行10k次循环，并在之前和之后比较时间戳。

- YOU

Answer 6

原生的 getElementById 函数更快。Jquery 选择器引擎只是为任何 #x 选择器包装了这个函数。

使用 Firebug 控制台，您可以以以下方式对 jQuery 进行分析。 不确定它对像 getElementById 这样的原生 API 调用是否有效。

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

- redsquare

Answer 7

嘿。在研究这个问题时，我发现了这篇优秀的文章。还有一篇关于JQuery学习网站的文章，介绍了具体的优化速度技巧！

值得注意的是，在最新的DOM规范中，通常情况下不需要担心性能问题。只有在出现瓶颈时才需要考虑。

优化选择器

- Richard Cooke

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

我也尝试了这里当前被标记为已接受答案的方法，据说“快得多”，但它仍然比标准JavaScript等效方法慢89％：

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

随意运行它，查看在您的浏览器中获得了什么，以及我制作的性能基准。没有 jQuery 的版本似乎要快得多。

- Uniphonic