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

Question

在浏览器性能方面，我应该链选择器调用吗?jQuery会做一个完整的文档搜索吗?

例如$('.my_thing') and $('#outer_div .my_thing')

Answer 1

我建议你阅读24ways: Your jQuery: Now With 67% Less Suck这篇文章。特别是选择器优化部分。

正如你在现代浏览器中看到的，类选择器非常快，但在<IE8。>

我建议不要用$('#outer_div .my_thing')，最好用$('#outer_div').find('.my_thing')。

Answer 2

这完全取决于选择器。

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

这里比较的是两个非常快的选择器，所以差别并不重要

Answer 3

这里有一些关于这个主题的有用文章:

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

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

Answer 4

一般来说是第一个例子，因为第二个例子需要额外的步骤:找到第一个元素，然后遍历它的DOM分支，直到找到第二个元素。

假设您正在DOM中搜索第一个元素，您实际上可以传递第二个元素(您正在查找)，因为循环的结束条件是查找第一个元素。

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

相关:最快的选择器方法在jquery和CSS - ID或不?

Answer 5

另一个:

'#id'选择器是最快的，find是浏览器本地方法

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