为了性能，我应该链接选择器调用还是让 jQuery 完成工作？答案

【问题标题】：For performance, should I chain selector calls or let jQuery do the work?为了性能，我应该链接选择器调用还是让 jQuery 完成工作？
【发布时间】：2013-03-27 01:05:21
【问题描述】：

在浏览器性能方面，我应该链接选择器调用吗？ jQuery 是否会进行完整的文档搜索？

例如$('.my_thing') and $('#outer_div .my_thing')的区别

【问题讨论】：

jQuery 通常使用document.querySelectorAll()，因此浏览器正在做优化。唯一的例外是选择器为".someclass" 或"#someelement" 或"thetagname"。我希望这个类会更快，因为它被发送到document.getElementsByClassName()，但是我没有测试这个，因为它是一个过早的优化，通常最好使用更有意义的东西，而不是在这种情况下更快的东西。跨度>

标签： jquery

【解决方案1】：

这完全取决于选择器。

在您的情况下，假设您在 #outer_div 之外没有 .my_thing 元素，那么两个选择器都会非常快，因为它们将使用底层的 getElementsByTagName。

你在这里比较了两个非常快的选择器，所以区别并不重要。

【讨论】：

【解决方案2】：

常识说的是第一个示例，因为第二个示例需要额外的步骤，即找到第一个元素，然后遍历其 DOM 分支，直到找到第二个元素。

假设您正在 DOM 中搜索第一个元素，您实际上可以传递第二个元素（您正在寻找），因为循环的终止条件是找到第一个元素。

与大多数性能调整一样，这些改进将取决于浏览器。

有关的： Fastest selector method in jquery and CSS - ID or not?

【讨论】：

【解决方案3】：

我建议你阅读这篇关于 24ways:Your jQuery: Now With 67% Less Suck. 的文章，尤其是 Selector 优化部分。

正如您将在现代浏览器中看到的那样，类选择器非常快，但在

我建议不要使用$('#outer_div .my_thing')，更好的是$('#outer_div').find('.my_thing')。

【讨论】：

@Scottie 世界很小或 S.O.很大 :) 很高兴在这里见到你！

【解决方案4】：

这里有一些关于该主题的有用文章：

http://blog.bigbinary.com/2010/02/15/how-jquery-selects-elements-using-sizzle.html http://dumitruglavan.com/jquery-performance-tips-cheat-sheet/ http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-think-right-to-left-with-jquery/

总而言之，随着 Sizzle 的引入，上述查询应该给出大致相同的性能数字。如果您使用旧版本，第一种方法应该更快。

【讨论】：

【解决方案5】：

另一个：

'#id'选择器最快，find是浏览器原生方法

$('#outer_div').find('.my_thing'); 
// or shorthand 
$('.my_thing', '#outer_div');

【讨论】：