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 );
};

Answer 1

当前接受的答案与将:first和:eq(0)与.first()和.eq(0)进行比较的tests across many browsers不一致。

对于当前主流的桌面浏览器：
$('foo').first()几乎是$('foo:first')

的四倍

如果您想检查方法，here are the tests and their current results。

Answer 2

第二个必须在获取第一个之前获取选择器中的所有项目。因此，如果选择器是10,000个项目，它将获取所有10,000个，然后是该组中的第一个。我希望第一个在这方面会更好，因为它会在搜索时过滤（并在第一个被发现后停止）。但在大多数情况下可能都是微不足道的。

当然，如果你是链接功能，那么它可能是不可避免的：

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

Answer 3

在我的测试中，$('mySelector:first'); 更快而不是$('mySelector').first();

您可能也对this;

感兴趣

Answer 4

将$('li:first')与$('li').first()进行比较，我敢打赌第一个必须更快。例如，在包含100 li 的文档中，第二个查询只是构建一个包含100个项目的列表，然后从中返回第一个项目;另一方面，第一个查询将在返回第一个li后停在那里。

即使查询是由浏览器本机处理的，它仍然需要比第一个更多的内存。

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

4 个答案: