nth - ¿Son los selectores jQuery''s: first y: eq(0) funcionalmente equivalentes?

jquery selector

Question

No estoy seguro de si usar :first o :eq(0) en un selector. Estoy bastante seguro de que siempre devolverán el mismo objeto, pero ¿es uno más rápido que el otro?

Estoy seguro de que alguien aquí debe haber evaluado estos selectores antes y no estoy realmente seguro de cuál es la mejor manera de probar si uno es más rápido.

Actualización: aquí está el banco que corrí:

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

Asumí que el tercero sería el más rápido y el cuarto sería el más lento, pero aquí están los resultados que obtuve:

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

Estaba en lo cierto al decir que el primer objeto DOM nativo era el más rápido ( [0] ), pero no puedo creer que el ajuste de ese objeto en la función jQuery fuera más rápido que ambos :first y :eq(0) !

A menos que lo esté haciendo mal.

Answer 1

2018: Sí, :first y :eq(0) devuelven el mismo resultado, aunque la diferencia de rendimiento sería marginal e incluso trivial en 2018.

2010: Buena pregunta y gran post. Probé esto hace algún tiempo y no pude recordar el resultado exacto. Estoy realmente contento de haber encontrado esto porque es precisamente lo que estaba buscando.

Supongo que el motivo de :first y :eq(0) es un poco más lento probablemente esté relacionado con el rendimiento del análisis. Omitir esto permite al motor jQuery utilizar las funciones nativas getElementsByTagName y getElementsByClassName .

Sin sorpresas, el elemento DOM es el más rápido de acceder. Ajustar el elemento DOM con jQuery en un bucle for no necesariamente tendrá un efecto adverso en el rendimiento, ya que jQuery utiliza una propiedad expando para fines de almacenamiento en caché.

Sin embargo, sería interesante ver cómo get(0) compara get(0) con el acceso al elemento DOM y cómo el ajuste de jQuery del mismo se compara con eq(0) y el resto de los resultados.

Answer 2

De acuerdo con el código fuente de jQuery, .first() es solo un envoltorio de conveniencia para .eq(0) :

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

Answer 3

Sí son equivalentes.

No, no es probable que sean significativamente diferentes (cualquier otra cosa es una microoptimización).