Are jQuery's :first and :eq(0) selectors functionally equivalent?
Posted
by travis
on Stack Overflow
See other posts from Stack Overflow
or by travis
Published on 2009-08-05T15:45:16Z
Indexed on
2010/04/29
7:27 UTC
Read the original article
Hit count: 399
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.
© Stack Overflow or respective owner