jQuery 单选择器与 .find()

IT技术 javascript jquery jquery-selectors
2021-01-14 01:00:36

哪个更适合用作性能角度：

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

或者

$(".div1").find("h2, h3")
4个回答

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

选择器更快

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

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

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

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

从分析的角度：

$(".div1 h2, div1 h3")

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

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

如果您计划将一些其他功能链接到.div1以下内容会更好：

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

其实，.find（）CAN更快。

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

我也乞求不同关于性能不重要。在这个智能手机的世界里，电池寿命是王道。

这很有趣，但在这种情况下，它不会搜索h2和h3仅是 的后代div1。
2021-03-20 01:00:36
@Dan“查找缓存”实际上使用 div1，但只是将其缓存在上面，例如：话var cache = $(".div1"); 虽如此，Firefox 似乎并不认为它更快。在这种情况下，您是对的，“速度查找”将找到所有h2 h3，但是直接为它们提供类很简单，例如：$.find(".classh2, .classh3")针对特定的类。
2021-04-08 01:00:36

我刚刚找到了这个答案，并想在这里添加一些数字，可能有人会发现它们有帮助和好奇。就我而言，我jQuery为唯一元素寻找最快的选择器。我不喜欢无缘无故地添加 ID，所以我寻找选择没有 ID 的元素的方法。

在我的小型研究中，我使用了很棒的 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()

以下是结果：

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。干杯!

其它你可能感兴趣的问题
上一篇toRad() Javascript 函数抛出错误 下一篇localStorage - 使用 getItem/setItem 函数还是直接访问对象？