jQuery什么更快：选择器还是方法？

Question

假设我有$('mySelector:first');和$('mySelector').first();。哪种方法更有效率？我查看了源代码，但仍然无法弄清楚。

看起来在第一种情况下，jQuery会遍历每个元素直到找到第一个：

CHILD: function( elem, match ) {
        var type = match[1],
        node = elem;
        switch ( type ) {
            ...
         case "first":
          while ( (node = node.previousSibling) )  {
           if ( node.nodeType === 1 ) { 
            return false; 
           }
          }
          if ( type === "first" ) { 
           return true; 
          }
          node = elem;
                ...
        }
}

在第二种情况下，jQuery对集合进行了切片，但我不确定它的效率如何。

function first() {
  return this.eq( 0 );
};

function eq( i ) {
  return i === -1 ?
    this.slice( i ) :
    this.slice( i, +i + 1 );
};

- Maksim Vi.

---

速度差异非常微小，几乎不会有任何影响。 - Alex

@Phrogz 这真的很执着。 - Raynos

@Alex，速度差异似乎是4的因素，因此在更大的选择中可能会累加。 - Yahel

Answer 1

当前接受的答案与比较 许多浏览器的测试 不一致，这些测试将 :first 和 :eq(0) 与 .first() 和 .eq(0) 进行比较。

对于当前主要的桌面浏览器：
$('foo').first() 几乎比 $('foo:first') 快四倍

如果您想检查方法论，请这里是测试和它们当前的结果。

- Phrogz

---

好的，我会给你答案，除非shamittomar能提供他的测试。 - Maksim Vi.

数据驱动的答案太棒了！+1。 - Yahel

Answer 2

第二种方法需要获取选择器中的所有项，然后才能获取第一个项。因此，如果选择器有10,000个项，它将获取全部10,000个项，然后再从该组中获取第一个项。我希望第一种方法在这方面会更好，因为它在搜索时进行筛选（并在找到第一个项后停止）。虽然在大多数情况下这可能微不足道。

当然，如果您正在链接函数，那么这可能是不可避免的:

$('.someclass').addClass('otherClass').first().addClass('firstClass');

- methodin

Answer 3

在我的测试中，$('mySelector:first');比$('mySelector').first();更快。

你可能也对this感兴趣；

- shamittomar

---

非常好的链接，谢谢。现在我要优化我的选择器 =）你介意分享测试吗？ - Maksim Vi.

你是否在不同的浏览器、版本和操作系统上进行了测试？你是否在具有单个匹配元素与10个或100个元素的文档之间进行了测试？ - Phrogz

Answer 4

比较 $('li:first') 和 $('li').first()，我敢打赌第一个一定更快。因为例如在一个包含100个li的文档中，第二个查询将简单地构建一个包含100个项目的列表，然后从中返回第一个; 另一方面，第一个查询将在返回第一个li后立即停止。

即使浏览器本地处理查询，它仍然比第一个查询占用更多内存。

- xandy

---

此外，CSS选择器最终将由浏览器实现，这将使其更快。 - David Tang

你的逻辑在假设上是正确的，但你是否检查了Sizzle源代码以确保:first伪类在查找期间应用，而不是在找到完整集之后再应用？ - Phrogz