Question

我想知道在使用jQuery进行选择时使用context参数与使用普通的CSS范围选择器相比是否有任何优势。

假设我有这个html：

<div class="contacts">
    <h1>All contacts</h1>
    <div class="contact new">
        <p class="name">Jim Jones</p>
        <p class="phone">(555) 555-1212</p>
    </div>
    <div class="contact new">
        <p class="name">Bob Smith</p>
        <p class="phone">(555) 555-1213</p>
    </div>
    <div class="contact new">
        <p class="name">Dave Baker</p>
        <p class="phone">(555) 555-1214</p>
    </div>
    <div class="contact">
        <p class="name">Pete Harrison</p>
        <p class="phone">(555) 555-1215</p>
    </div>
    <div class="contact">
        <p class="name">George Donald</p>
        <p class="phone">(555) 555-1216</p>
    </div>
    <div class="contact">
        <p class="name">Chris Root</p>
        <p class="phone">(555) 555-1217</p>
    </div>
</div>

如果我想从联系人div中获取所有新联系人（标记为“new”类），哪种方法更快，更好地扩展等等。？

$('.contacts .new');

或者

$('.new', '.contacts');

jsFiddle

更新

在答案和评论中散布着很多很棒的信息。总结一下主要观点，在大多数浏览器中，当存在多个.contacts div时，单个选择器会更好地扩展。在大多数浏览器中，两个选择器上下文方法更快，只有一个.contacts div存在。

有用的东西是我们可以在选择具有id的元素内部时使用一种方法。

$('p:first', '#chapter2'); // get the first paragraph from chapter 2

对于我们从可能较大的元素组中进行选择的实例，使用单选择器方法。

$('.chapter p:first-child'); // get the first paragraph from all chapters

Answer 1

对所有（我的）赔率，似乎2号是最快的。

检查it here

Answer 2

理论上，

$('.contacts .new')应该更好地扩展，因为它只对选择器引擎进行一次调用。对于$('.new', '.contacts')，至少要对选择器函数进行两次调用 - 首先获取具有类名.contacts的所有元素，然后进一步调用返回的每个.contacts元素。

总之，只要将更多.contacts元素抛入HTML中，第二种方法就需要一个循环，它会显着减慢。如果您不想拥有更多.contact个元素，那么您应该使用更快的ID。

Answer 3

http://jsfiddle.net/cvWA7/1/

我得到的结果是第一个选择器$('.contacts .new')大约快了22％。

更新有趣的是Pablo得到了相互矛盾的结果。我想知道我的测试是否有问题。

更新2 这是在Chrome 13上运行

Answer 4

IIRC，$('.foo', '.bar')代表$('.bar').find('.foo')，所以第二个应该更快。

$('.foo', '.bar')比$('.foo .bar')快的原因是因为它通过sizzle执行为原生getElementsByClassName。在执行任何复杂逻辑之前，在代码的早期检查只包含单个类名的选择器的情况。

更新：就像我想的那样，使用find（）稍快一点：http://jsperf.com/jquery-selection-method/2

update 2 ：我在jQuery的代码中查找了它 - $('.foo', '.bar')委托给$('.bar').find('.foo') - https://github.com/jquery/jquery/blob/master/src/core.js#L171。

Answer 5

第二个是无证件，所以你根本不应该使用它。

context参数应为：

用作上下文的DOM元素，文档或jQuery

参考：http://api.jquery.com/jQuery/

字符串既不是那些。

因此，在使用at作为上下文之前，您应该从选择器创建一个jQuery对象：

$('.new', $('.contacts'));

当你进行两次jQuery调用时，这应该稍慢一些。但是，这两个表达式基本上都做同样的工作，所以区别不应该那么大。

编辑：

测试方法如何缩放：http://jsperf.com/jquery-selection-method/4

显示浏览器之间的性能不同。当你有一个.contacts时，单个选择器在大多数浏览器中都比较慢，除了Opera真的很快。使用多个.contacts元素，单个选择器可以更好地扩展。

Answer 6

在你的两个例子中，第一个选择器可能会更快。但是，如果将上下文分配给变量，则使用第二种方法，它的速度要快得多。

contacts = $('div.contacts');
$('.new', contacts);

您可以在http://jsperf.com/jquery-context-with-tagname看到结果。如果你有一个更大的HTML文档，那么使用标记名称为类添加前缀也可能会产生更好的性能。

哪种jQuery选择方法更快？

6 个答案:

编辑：