Javascript jquery，性能方面什么是更快的 getElementById 或 jquery 选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1854859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery, performance-wise what is faster getElementById or jquery selector?
提问by Ahmed Magdy
What is better from performance wise document.getElementById('elementId')or $('#elementId')?
How can I calculate the speed by myself?
什么是更好的性能明智document.getElementById('elementId')或$('#elementId')？我如何自己计算速度？
回答by jeffreyveon
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 :
如果您关心性能，原生 getElementById 会快得多，但是 jQuery 可以让您非常方便地访问很多东西。所以，你可能想使用类似的东西：
$( document.getElementById("some_id") ).jQueryCall();
This will give you a better performance, and at the same time, allow you to use jQuery.
这将为您提供更好的性能，同时允许您使用 jQuery。
回答by Marius
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.
getElementById 更快，因为它使用本机代码。jQuery 选择器也会使用 getElementById，但它首先需要对文本进行大量测试和比较。
回答by Marcio
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.
如果您想测试 jquery 和 dom 之间的任何类型的性能，请使用http://jsperf.com/，但 jquery 通常较慢，因为它基于 dom。
回答by An0nC0d3r
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
运行 1
With $(document.getElementById("test")).somejQueryCall(): 552 milliseconds
与$(document.getElementById("test")).somejQueryCall()：552 毫秒
With $("#test").somejQueryCall(): 881 milliseconds
与$("#test").somejQueryCall()：881 毫秒
With $(elem).somejQueryCall(): 1317 milliseconds
与$(elem).somejQueryCall()：1317 毫秒
Run 2
运行 2
With $(document.getElementById("test")).somejQueryCall(): 520 milliseconds
与$(document.getElementById("test")).somejQueryCall()：520 毫秒
With $("#test").somejQueryCall(): 855 milliseconds
与$("#test").somejQueryCall()：855 毫秒
With $(elem).somejQueryCall(): 1289 milliseconds
与$(elem).somejQueryCall()：1289 毫秒
Run 3
运行 3
With $(document.getElementById("test")).somejQueryCall(): 565 milliseconds
与$(document.getElementById("test")).somejQueryCall()：565 毫秒
With $("#test").somejQueryCall(): 936 milliseconds
与$("#test").somejQueryCall()：936 毫秒
With $(elem).somejQueryCall(): 1445 milliseconds
与$(elem).somejQueryCall()：1445 毫秒
I can't believe the difference!!! Just had to share this!
我不敢相信差异！！！只好分享这个！
Peace!
和平！
回答by YOU
Of course getElementById is faster but with jQuery you can do lots of things.
当然 getElementById 更快，但使用 jQuery 你可以做很多事情。
To test that, you can try to loop 10k times for each, and compare timestamps before and after.
为了测试这一点，您可以尝试为每个循环循环 10k 次，并比较前后的时间戳。
回答by redsquare
The native getElementById is faster. Jquery selector engine just wraps this for any #x selectors.
本机 getElementById 更快。Jquery 选择器引擎只是为任何 #x 选择器包装了它。
Using the firebug console you can profile jquery in the following way. Not sure it works well for native api calls like getElementById.
使用萤火虫控制台，您可以按以下方式分析 jquery。不确定它是否适用于 getElementById 等本机 api 调用。
console.profile();
$('#eleId');
console.profileEnd();
回答by Richard Cooke
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!
呵呵。研究这个问题，我发现了这篇优秀的文章。还有一篇关于此的帖子，其中包含 JQuery 学习站点上的最新内容，其中包含优化速度的具体技巧！
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.
值得注意的是，使用最新的 DOM 规范，您可能不必担心一般的性能。仅当您创建（或发现）瓶颈时。
回答by Uniphonic
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:
由于此页面中链接的其他性能测试似乎已损坏，并且还包含此问题中未询问的内容（即自定义 jQuery 方法），因此我决定制作一个新的性能基准来回答问题包括 jQuery 中的完全等效（返回 DOM 元素），而不是自定义方法：
https://jsperf.com/jquery-get-0-vs-get-element-by-id
https://jsperf.com/jquery-get-0-vs-get-element-by-id
When I run it in my Chrome, it shows that a straight jQuery
当我在 Chrome 中运行它时，它显示了一个直接的 jQuery
$('#foo').get(0)
is 92% slower than the equivalent operation in standard JavaScript
比标准 JavaScript 中的等效操作慢 92%
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:
我还尝试了目前在这里标记为已接受答案的内容，据说它“快得多”，但它仍然比标准的 JavaScript 等价物慢 89%：
$( document.getElementById("foo") ).get(0);
Feel free to run it for yourself and see what you get in your browser, with the performance benchmarkthat I made. The version with no jQuery seems to be a lot faster.
随意自己运行它，看看你在浏览器中得到了什么，以及我制作的性能基准。没有 jQuery 的版本似乎要快得多。
