jquery父后代选择器

Question

为什么1比2快？

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

Answer 1

最好的方法是测试！

通过这个简单的测试：

• 内容 - ​<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

---

在cae中，你在jQuery 1.3.2上就是这些结果：

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

Try it out with 1.3.2 here

Answer 2

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

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

Answer 3

在你的情况下，也许＃1比＃2更快，但是根据搜索的次数和搜索的元素数量，＃2在其他情况下可能比＃1更快。

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