¿Los jQuery's: first y: eq (0) selectores son funcionalmente equivalentes?
-
22-07-2019 - |
Pregunta
No estoy seguro de si usar : primero
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 comparado previamente estos selectores y no estoy realmente seguro de la mejor manera de probar si uno es más rápido.
Actualización: aquí está el banco que ejecuté:
/* 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 */
Supuse 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
Tenía razón acerca de devolver el primer objeto DOM nativo como 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 : primero
y : eq (0)
!
A menos que lo esté haciendo mal.
Solución
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 excelente publicación. Probé esto hace un 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 cual : first
y : eq (0)
es un poco más lento probablemente esté relacionada con el rendimiento del análisis. Omitirlos permite que el motor jQuery utilice las funciones nativas getElementsByTagName
y getElementsByClassName
.
Sin sorpresas i.t.o. El elemento DOM es el de acceso más rápido. 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)
se compara con el acceso al elemento DOM y cómo el envoltorio jQuery del mismo se compara con eq (0)
y el resto de los resultados.
Otros consejos
Según el código fuente de jQuery, .fir )
es solo un contenedor conveniente para .eq (0)
:
first: function() {
return this.eq( 0 );
},
Sí, son equivalentes.
No, no es probable que sean significativamente diferentes (cualquier otra cosa es micro-optimización).