Javascript jQuery 单选择器与 .find()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6230266/
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 single selector vs .find()
提问by Dan
Which is better to use as a performance perspective:
哪个更适合用作性能角度：
$(".div1 h2, .div1 h3")
or
或者
$(".div1").find("h2, h3")
采纳答案by zzzzBov
The answer to your question is: yes.
你的问题的答案是：是的。
Don't worry about the performance difference, unless your code is slow. If it is, use a profiler to determine bottlenecks.
不要担心性能差异，除非您的代码很慢。如果是，请使用分析器来确定瓶颈。
From an analysis standpoint:
从分析的角度：
$(".div1 h2, div1 h3")
should be faster as jQuery will pipe it through querySelectorAll(if it exists) and native code will run faster than non-native code. It will also save on an additional function call.
应该更快，因为 jQuery 将通过管道querySelectorAll（如果存在）和本机代码将比非本机代码运行得更快。它还可以节省额外的函数调用。
$(".div1").find("h2, h3")
is better if you plan on chaining some other functions on .div1:
如果您计划将其他一些功能链接到.div1以下内容会更好：
$(".div1").find("h2, h3").addClass('foo').end().show();
回答by James Montagne
http://jsperf.com/selector-vs-find-again
http://jsperf.com/selector-vs-find-again
selector is faster
选择器更快
(NOTE: made up random html just so it wasn't just those elements on the page)
（注意：组成随机 html 只是为了不只是页面上的那些元素）
回答by Drath
Actually, .find() CANbe faster.
其实，.find（）CAN更快。
Selectors seem to be quicker over find when trying to select multiple elements; however, if you use a $.find, or even cache the descendant, you can see it's much faster: http://jsperf.com/selector-vs-find-again/11
尝试选择多个元素时，选择器似乎比 find 更快；但是，如果您使用 $.find，甚至缓存后代，您会发现它要快得多：http: //jsperf.com/selector-vs-find-again/11
I also beg to differ about performance not being important. In this world of smart phones, battery life is king.
我也乞求不同关于性能不重要。在这个智能手机的世界里，电池寿命是王道。
回答by sashaegorov
I've just found this answer and want to add some numbers here, may be someone find them helpful and curious. In my case I looked for fastest jQueryselector for unique element. I don't like to add IDs without reason, so I looked for way to select elements without ID.
我刚刚找到了这个答案，并想在这里添加一些数字，可能有人会发现它们有帮助和好奇。就我而言，我jQuery为唯一元素寻找最快的选择器。我不喜欢无故添加 ID，因此我寻找了选择没有 ID 的元素的方法。
In my small research I used awesome selector profilerfor jQuery. And here is the code I fired up directly from Chrome console after I added profiler's library code:
在我的小型研究中，我使用了很棒的 jQuery选择器分析器。这是我在添加分析器的库代码后直接从 Chrome 控制台启动的代码：
$.profile.start()
// Lets
for (i = 0; i < 10000; i++) {
// ID with class vs. ID with find(class)
$("#main-menu .top-bar");
$("#main-menu").find(".top-bar");
// Class only vs element with class
$( ".top-bar" );
$( "nav.top-bar" );
// Class only vs class-in-class
$( ".sticky" );
$( ".contain-to-grid.sticky" );
}
$.profile.done()
Here are results:
以下是结果：
jQuery profiling started...
Selector Count Total Avg+/-stddev
#main-menu .top-bar 10000 183ms 0.01ms+/-0.13
nav.top-bar 10000 182ms 0.01ms+/-0.13
.contain-to-grid.sti... 10000 178ms 0.01ms+/-0.13
.top-bar 10000 116ms 0.01ms+/-0.10
.sticky 10000 115ms 0.01ms+/-0.10
#main-menu 10000 107ms 0.01ms+/-0.10
undefined
Slowestselectors are on the top of this chart. Fastest ones are at the bottom. Surprisingly for me right after selector by ID i.e. $('#main-menu')I've found single class selector e.g. .top-barand .sticky. Cheers!
最慢的选择器位于此图表的顶部。最快的是在底部。令我惊讶的是，在通过 ID 选择器之后，$('#main-menu')我发现了单类选择器，例如.top-bar和.sticky。干杯!
