Javascript jQuery单选择器与find（）的比较

哪一个更好地用作性能透视图：

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

或

选择器速度更快

---

注意：随机生成html，这样它就不仅仅是页面上的那些元素了。你的问题的答案是：是的

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

从分析的角度来看：

$(".div1 h2, div1 h3")

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

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

如果您计划将其他一些函数链接到.div1:

实际上，.find可以更快

当尝试选择多个元素时，选择器似乎比查找更快；但是，如果使用$.find，甚至缓存子体，您可以看到它的速度要快得多：

---

对于绩效不重要的问题，我也不敢苟同。在这个智能手机的世界里，电池寿命是最重要的。

我刚刚找到了这个答案，想在这里添加一些数字，也许有人会觉得这些数字既有用又好奇。在我的例子中，我为unique元素寻找了最快的jQuery选择器。我不喜欢无缘无故地添加ID，所以我想办法选择没有ID的元素

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

---

最慢的选择器位于此图表的顶部。最快的在底部。让我惊讶的是，在ID选择器之后，即$'main-menu'，我发现了单个类选择器，例如顶部栏和.sticky。干杯

要了解这一点，您可以分析您的代码：请参阅，了解与性能无关但重要的区别。就我个人而言，我不会担心微秒级的差异，除非代码将在循环中运行，或者您正在编写一个供第三方使用的库⁶ x1微秒等于1秒：这种逻辑也可以应用于本机选择器。对于大多数JS函数来说，慢对我来说意味着超过大约0.3秒。我不可能让浏览器挂起1秒，更不用说10秒了。如果它超过了我的慢门槛，我会重构代码并分析性能。是的，你是对的，在这种情况下，性能差异并不是什么大问题。但是要小心那句话。看到几个性能问题，人们认为如果它起作用，我就不在乎了。我的意思是，你不应该担心性能，除非它是一个问题。我从来没有说过草率的代码是可以的，但我不介意使用^3组循环，如果它们是可以理解的并且不会导致性能问题的话。如果他们这样做了，我肯定会努力使他们尽可能地接近On。@BrunoLM:我同意粗心。养成良好的习惯并没有坏处，如果这些习惯碰巧提高了绩效，不管它有多小，甚至更大。养成良好的习惯不会增加开发时间，但会在需要时节省以后的性能调整时间。这很有趣，但在本例中，它不会搜索仅为div1的后代的h2和h3。@Dan find缓存实际上使用div1，而只是将其缓存在上面，如：var cache=$.div1；话虽如此，Firefox似乎并不认为它更快。在这种情况下，您是正确的，speed find将查找所有h2 h3，但直接为它们提供类很简单，例如：$.find.classh2、.classh3到特定的类。这是实际的答案；而不仅仅是它不重要。这很重要，因为OP问。你有什么让它更快的因素吗？我会本能地认为这个发现会更快。所以我很好奇是什么让它变慢了。如果浏览器支持querySelectorAll，那么将使用该选项，而且速度更快。我得到了这个。。。选择器-35349-±1.47%-43%慢，找到-62415-±2.58%-最快，还有其他测试。隐藏链接，我得到了几乎相反的结果。。发现速度慢了52%。。有人能解释一下吗？根据最新版本的测试，实际上查找速度更快，特别是在简单查找中

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

$.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()