【问题标题】：Which jQuery selection is more efficient?哪个 jQuery 选择更有效？
【发布时间】：2012-03-21 06:13:56
【问题描述】：

哪一组选择器效率更高？

1

$('#parent_element span.class1').do_something1();
$('#parent_element span.class2').do_something2();
$('#parent_element span.class3').do_something3();
$('#parent_element span.class4').do_something4();

2

$parent_element = $('#parent_element'); 
$parent_element.find('span.class1').do_something1();
$parent_element.find('span.class2').do_something2();
$parent_element.find('span.class3').do_something3();
$parent_element.find('span.class4').do_something4();

我的猜测是＃2 更有效，因为它开始搜索 find() 专注于父元素与整个 DOM。这是真的吗？

如果是这样，需要多少次调用该父元素才能使其比 #1 更有效？

谢谢！

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

解决方案 #2 效率更高。在 jQuery 中缓存选择器是减少选择所需时间的最佳方法之一。对于大于 1 的任何用途，请使用解决方案 2。

【讨论】：

【解决方案2】：

与任何类似的事情一样，如果您想要真正的答案，则必须使用 jsperf 之类的工具进行测试。测试表明第二个比第一个快很多。

如果它们都是相同的方法调用，或者您可以在 .each(fn) 方法中处理每一个，您可以像这样将它们组合起来，选择器操作会明显更快：

$('#parent_element').find('span.class1, span.class2, span.class3, span.class4').each(fn);

您可以在这里自己运行它：http://jsperf.com/selector-options。你的第一个选择是橙色。你的第二个选择是蓝色。组合选择器是红色的。缓存的父级大约快 30-80%。如果它们都可以组合到一个选择器中，那么速度会快很多倍。

【讨论】：

@iambriansreed - 请查看我最新版本的答案以及性能测试，这是真实数据。
@iambriansreed。为什么是这样？！对我来说看起来不错。 +1
@gdoron jfriend00 的or 示例显然不相关，因为每个元素在我的问题中都在做不同的事情。分组选择器很好，但与问题无关。
@iambriansreed - 请原谅我实际运行了其他所有人猜测的性能测试。这是唯一具有实际性能数字的答案，应该如何回答所有重要的性能问题。
@iambriansreed - 至于分组选择器，我将其包括在内，因为在单个函数可用于处理多个元素的情况下（即使该函数必须执行某些部分的工作不同）每个项目），它快了很多。您尚未透露您的实际操作是什么，因此我们无法确定您是否有可能，但很多时候确实如此。也许不是您想要考虑的东西，但它与可能阅读此内容的社区相关，所以我认为添加它很有用。显然，我因添加有关此的额外信息而被否决。