哪种 jQuery 选择方法更快？

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 中获取所有新联系人（由“新”类标记），哪种方法更快、扩展性更好等等？

$('.contacts .new');

或者

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

jsFiddle

更新

答案和 cmets 中散布着很多很棒的信息。总结要点，在大多数浏览器中，当有多个 .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

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

$('.foo', '.bar') 比$('.foo .bar') 快的原因是它作为原生getElementsByClassName 被嘶嘶声执行。在执行任何复杂逻辑之前，很早就在代码中检查了仅包含单个类名的选择器的情况。

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

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

Answer 4

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

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

您可以在http://jsperf.com/jquery-context-with-tagname 查看结果。如果您有一个较大的 HTML 文档，在类前面加上标签名称也可能会产生更好的性能。

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

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

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

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

更新 2 这是在 Chrome 13 上运行的