jQuery 的 :first 和 :eq(0) 选择器在功能上是等效的吗？答案

【问题标题】：Are jQuery's :first and :eq(0) selectors functionally equivalent?jQuery 的 :first 和 :eq(0) 选择器在功能上是等效的吗？
【发布时间】：2010-11-17 01:44:12
【问题描述】：

我不确定是在选择器中使用:first 还是:eq(0)。我很确定他们总是会返回同一个对象，但是一个比另一个更快吗？

我确信这里的某个人之前一定已经对这些选择器进行了基准测试，但我不确定测试一个是否更快的最佳方法。

更新：这是我跑过的板凳：

/* start bench */
for (var count = 0; count < 5; count++) {
    var i = 0, limit = 10000;
    var start, end;
    start = new Date();
    for (i = 0; i < limit; i++) {
        var $radeditor = $thisFrame.parents("div.RadEditor.Telerik:eq(0)");
    }
    end = new Date();
    alert("div.RadEditor.Telerik:eq(0) : " + (end-start));
    var start = new Date();
    for (i = 0; i < limit; i++) {
        var $radeditor = $thisFrame.parents("div.RadEditor.Telerik:first");
    }
    end = new Date();
    alert("div.RadEditor.Telerik:first : " + (end-start));
    start = new Date();
    for (i = 0; i < limit; i++) {
        var radeditor = $thisFrame.parents("div.RadEditor.Telerik")[0];
    }
    end = new Date();
    alert("(div.RadEditor.Telerik)[0] : " + (end-start));
    start = new Date();
    for (i = 0; i < limit; i++) {
        var $radeditor = $($thisFrame.parents("div.RadEditor.Telerik")[0]);
    }
    end = new Date();
    alert("$((div.RadEditor.Telerik)[0]) : " + (end-start));
}
/* end bench */

我认为第 3 名最快，第 4 名最慢，但这是我得出的结果：

FF3:    :eq(0)  :first  [0] $([0])
trial1  5275    4360    4107    3910
trial2  5175    5231    3916    4134
trial3  5317    5589    4670    4350
trial4  5754    4829    3988    4610
trial5  4771    6019    4669    4803
Average 5258.4  5205.6  4270    4361.4

IE6:    :eq(0)  :first  [0] $([0])
trial1  13796   15733   12202   14014
trial2  14186   13905   12749   11546
trial3  12249   14281   13421   12109
trial4  14984   15015   11718   13421
trial5  16015   13187   11578   10984
Average 14246   14424.2 12333.6 12414.8

我只是返回第一个本机 DOM 对象是最快的 ([0]) 是正确的，但我无法相信在 jQuery 函数中包装该对象比 :first 和 :eq(0) 更快！

除非我做错了。

【问题讨论】：

标签： jquery jquery-selectors benchmarking

【解决方案1】：

根据 jQuery 的源代码，.first() 只是.eq(0) 的便捷包装器：

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

截至JQuery/3.6.0，这仍然适用。

【讨论】：

【解决方案2】：

2018：是的，:first 和 :eq(0) 返回相同的结果，尽管性能差异在 2018 年将是微不足道的，甚至可能微不足道。

2010：好问题和好帖子。我前段时间对此进行了测试，但不记得确切的结果。我真的很高兴找到了这个，因为它正是我想要的。

我猜:first 和:eq(0) 稍慢的原因很可能与解析性能有关。省略这些允许 jQuery 引擎利用原生的 getElementsByTagName 和 getElementsByClassName 函数。

没有惊喜 i.t.o.访问速度最快的 DOM 元素。在 for 循环中使用 jQuery 包装 DOM 元素不一定会对性能产生不利影响，因为 jQuery 使用 expando 属性进行缓存。

但是，看看get(0) 与 DOM 元素访问的比较，以及 jQuery 包装其与 eq(0) 和其他结果的比较，将会很有趣。

【讨论】：

我认为这个答案应该以简单的“是”或“否”开头，无论它们在功能上是否等效。

【解决方案3】：

是的，它们是等价的。

不，它们不太可能有显着差异（其他都是微优化）。

【讨论】：