jQuery 单一选择器与 .find()答案

【问题标题】：jQuery single selector vs .find()jQuery 单一选择器与 .find()
【发布时间】：2011-09-07 23:39:24
【问题描述】：

从性能角度来看哪个更好：

$(".div1 h2, .div1 h3")

或

$(".div1").find("h2, h3")

【问题讨论】：

发现你可以分析你的代码：jsperf.com
请参阅this answer 了解与性能无关但重要的区别。就我个人而言，我不会担心微秒级的差异，除非代码将在循环中运行，或者您正在编写一个可供第三方使用的库。
问题通常是一样的，10⁶ x 1microsec 等于 1sec :)
learn.jquery.com/performance/optimize-selectors（这个逻辑也可以应用于原生选择器）

标签： javascript jquery jquery-selectors

【解决方案1】：

http://jsperf.com/selector-vs-find-again

选择器更快

（注意：组成随机 html 只是为了不只是页面上的那些元素）

【讨论】：

这是实际答案；而不仅仅是“没关系”。这很重要，因为 OP 要求。
你有什么能让它更快的元素吗？我本能地认为发现会更快。所以我很好奇是什么让它变慢了。
@Ar3s zzzzBov 的回答提到了这一点。如果浏览器支持querySelectorAll，就会被使用，而且速度会更快。
我得到了这个...selector - 35,349 - ±1.47% - 慢了 43% find - 62,415 - ±2.58% - 最快使用其他测试 (jsperf.com/single-selector-vs-find) .hide() 被锁住了，我几乎相反.. 发现慢了 52%.. 有人能解释一下吗？
在最新版本jsperf.com/selector-vs-find-again/60 尤其是在简单的查找中，根据此测试，实际上查找速度更快

【解决方案2】：

你的问题的答案是：是的。

不用担心性能差异，除非您的代码很慢。如果是，请使用分析器来确定瓶颈。

从分析的角度来看：

$(".div1 h2, div1 h3")

应该更快，因为 jQuery 将通过querySelectorAll（如果存在）将其通过管道传输，并且本机代码将比非本机代码运行得更快。它还将节省额外的函数调用。

$(".div1").find("h2, h3")

如果您打算在.div1 上链接一些其他功能会更好：

$(".div1").find("h2, h3").addClass('foo').end().show();

【讨论】：

"slow" 对我来说意味着超过 0.3s 对于大多数 JS 函数。我不可能让浏览器挂 1 秒，更不用说 10 秒了。如果它超过了我的“慢阈值”，我会重构代码并分析性能。
是的，你是对的，在这种情况下，性能差异并不是什么大问题。但是要小心那句话。看到几个性能问题并且人们认为“如果它有效，我不再关心”，我有点受了创伤......
我所说的意思是你不应该担心性能，除非它是一个问题。我从来没有说过草率的代码是可以的，但是如果它们是可以理解的并且不会导致性能问题，我不介意 O(n^3) 组循环。如果他们这样做了，我当然会努力将它们减少到尽可能接近 O(n)。
@BrunoLM：我同意粗心大意。养成良好的习惯并没有什么坏处，如果它们碰巧提高了性能，无论多小，甚至更甜。养成一个好习惯不会增加开发时间，但如果需要的话，确实可以节省以后进行性能调整的时间。

【解决方案3】：

实际上，.find() 可以更快。

在尝试选择多个元素时，选择器似乎比 find 更快；但是，如果您使用 $.find，甚至缓存后代，您会发现它要快得多： http://jsperf.com/selector-vs-find-again/11

我也请求不同，性能并不重要。在这个智能手机的世界里，电池寿命为王。

【讨论】：

这很有趣，但在这种情况下，它不会搜索 h2 和 h3，它们只是 div1 的后代。
@Dan “查找缓存”实际上使用 div1，但只是将其缓存在上面，例如：var cache = $(".div1"); 话虽如此，Firefox 似乎并不认为它更快。在这种情况下，你是对的，“快速查找”会找到所有 h2 h3，但是直接给它们类很简单，比如：$.find(".classh2, .classh3") 来定位特定的。

【解决方案4】：

我刚刚找到了这个答案并想在此处添加一些数字，可能有人觉得它们很有帮助和好奇。就我而言，我寻找最快的 jQuery 选择器来获取唯一元素。我不喜欢无缘无故地添加 ID，所以我想办法选择没有 ID 的元素。

在我的小型研究中，我为 jQuery 使用了很棒的 selector profiler。这是我在添加分析器的库代码后直接从 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()

结果如下：

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

最慢选择器位于此图表的顶部。最快的在底部。令我惊讶的是，在 ID 选择器之后，即 $('#main-menu') 我找到了单类选择器，例如.top-bar 和 .sticky。干杯！

【讨论】：