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

Posted 2023-03-05

【中文标题】jQuery 啥更快：选择器还是方法？

【英文标题】：jQuery what is faster: selectors or methods?jQuery 什么更快：选择器还是方法？

【发布时间】：2011-05-14 20:35:41

【问题描述】：

假设我有$('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 );
;

【问题讨论】：

速度上的差异是如此之小，以至于丝毫没有关系。

@Phrogz 这真是让人着迷。

@Raynos 谢谢 (?) :)

@Alex 速度的差异似乎是 4 倍，所以它可以加起来更大的选择。

【参考方案1】：

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

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

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

【讨论】：

好点，我会给你答案，除非 shamittomar 可以提供他的测试。

欢迎数据驱动的答案！ +1。

【参考方案2】：

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

当然，如果您要链接函数，那可能是不可避免的：

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

【参考方案3】：

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

您可能也对this感兴趣；

【讨论】：

很好的链接，谢谢。现在我要优化我的选择器 =) 你介意分享测试吗？

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

【参考方案4】：

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

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

【讨论】：

另外，CSS 选择器最终将全部由浏览器实现，这将使其更快。

您的逻辑假设是有效的，但是您是否检查了 Sizzle 源以确保在查找过程中而不是在查找完整集之后应用了 :first 伪类？