jquery父后代选择器答案

【问题标题】：jquery parent descendant selectorjquery父后代选择器
【发布时间】：2011-03-31 17:52:07
【问题描述】：

为什么 1 比 2 快？

$('#p1').find('span');
$('#p1 span');

【问题讨论】：

标签： jquery jquery-selectors performance dom-traversal

【解决方案1】：

在 jQuery 1.4 中，检查选择器是否为 id 选择器（如您的 #p1）。

如果确实如此，则调用document.getElementId(...) 并将结果包装在jQuery 实用程序对象中并返回。
如果不是这样，jQuery 会调用Sizzle，然后它会做任何事情来查找元素。而且，从源头来看，这是非常重要的事情。

【讨论】：

【解决方案2】：

最好的方法是测试！

从这个简单的测试：

内容 - <p id="p1"><span>Test</span></p>
循环 100,000 次
版本：jQuery 1.4.2
$('#p1').find('span');: 2601ms
$('#p1 span');: 1998ms

在这种情况下，单个选择器似乎更快，因为您没有通过 jQuery 进行尽可能多的调用，这是有道理的。

Give it a try here, look at your console.

您使用的是 jQuery 1.3.2，结果如下：

$('#p1').find('span');: 3225ms
$('#p1 span');: 2082ms

Try it out with 1.3.2 here.

【讨论】：

【解决方案3】：

在您的情况下，#1 可能比 #2 快，但根据迭代次数和要搜索的元素数量，在其他情况下，#2 很可能比 #1 快。

例如：我猜如果你有 3 个 span 元素并且在 #p1 中没有其他元素，那么 #1 会比 #2 快，因为 find 不会尝试做那么多 CSS 匹配。但是，如果你有 1000 个 span 元素，以及 #p1 中的 2000 个其他元素，我敢打赌 #2 会更快，因为它不必对每个元素进行两次迭代。

【讨论】：