jQuery的:first和:eq(0)选择器在功能上是否等效? [英] Are jQuery's :first and :eq(0) selectors functionally equivalent?

问题描述

我不确定是使用 :first 还是

我认为第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)都快！ /p>

除非我做错了.

解决方案

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

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

我猜想:first和:eq(0)变慢的原因很可能与解析性能有关.省略这些允许jQuery引擎使用本机getElementsByTagName和getElementsByClassName函数.

毫无意外DOM元素是最快访问的元素.在循环中用jQuery包装DOM元素不一定会对性能产生不利影响，因为jQuery利用 expando 属性进行缓存.

但是，很有趣的是，看看get(0)与DOM元素访问的比较以及jQuery的包装如何与eq(0)以及其余结果相提并论.

I'm not sure whether to use :first or :eq(0) in a selector. I'm pretty sure that they'll always return the same object, but is one speedier than the other?

I'm sure someone here must have benchmarked these selectors before and I'm not really sure the best way to test if one is faster.

Update: here's the bench I ran:

/* 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 */

I assumed that the 3rd would be the fastest and the 4th would be the slowest, but here's the results that I came up with:

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

I was correct about just returning the first native DOM object being the fastest ([0]), but I can't believe the wrapping that object in the jQuery function was faster that both :first and :eq(0)!

Unless I'm doing it wrong.

解决方案

2018: Yes, :first and :eq(0) return the same result although the performance difference would be marginal and perhaps even trivial in 2018.

2010: Good question and great post. I tested this some while ago and couldn't remember the exact outcome. I'm really glad to have found this because it's precisely what I was looking for.

I would guess that the reason for :first and :eq(0) being a tad slower is most likely related to parsing performance. Omitting these allows the jQuery engine to utilize the native getElementsByTagName and getElementsByClassName functions.

No surprises i.t.o. the DOM element being the fastest to access. Wrapping the DOM element with jQuery in a for loop won't necessarily have an adverse effect on performance as jQuery makes use of an expando property for caching purposes.

However, it would be interesting to see how get(0) compares with DOM element access and how the jQuery wrapping thereof fares against eq(0) and the rest of the results.

这篇关于jQuery的:first和:eq(0)选择器在功能上是否等效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！