2009-08-05 10 views
16

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?¿Los selectores jQuery's: first y: eq (0) son funcionalmente equivalentes?

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

Actualización: aquí está el banco me encontré:

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

que supone 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 se me ocurrió:

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 correcto acerca de devolver el primer objeto DOM nativo siendo el más rápido ([0]), pero no puedo creer que el ajuste de ese objeto en la función jQuery fue más rápido que :first y :eq(0)!

A menos que lo esté haciendo mal.

Respuesta

6

Buena pregunta, gran publicación. Probé esto hace algún tiempo y no podía recordar el resultado exacto. Estoy muy contento de haber encontrado esto porque es precisamente lo que estaba buscando.

Supongo que la razón por la que :first y :eq(0) son un poco más lentos probablemente esté relacionada con el rendimiento del análisis. Omitir estos permite al motor jQuery utilizar las funciones nativas getElementsByTagName y getElementsByClassName.

Sin sorpresas i.t.o. el elemento DOM es el más rápido de acceder. Envolver el elemento DOM con jQuery en un para el bucle no tendrá necesariamente un efecto adverso en el rendimiento ya que jQuery utiliza una propiedad expando para almacenar en caché.

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

5

Sí, son equivalentes.

No es probable que sean significativamente diferentes (cualquier otra cosa es la micro-optimización).

12

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

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

Esta debe ser la respuesta aceptada. –

Cuestiones relacionadas