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

Question

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

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

score 1 · Accepted Answer

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

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

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

score 0 · Accepted Answer

这完全取决于选择器。

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

您在这里比较了两个非常快速的选择器，因此差异并不重要。

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

以下是有关该主题的一些有用文章：

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

score 0 · Accepted Answer

另一个：

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

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

5 回答 5