Supongamos que quiero conseguir el primer elemento de entre todos los elementos de la clase" .answer"
$($(".answer")[0])
I puede hacer lo anterior, pero ¿cuál es el mejor equilibrio entre elegancia y velocidad?
* cambió la cuestión a la luz del debate actual
Los siguientes son todos equivalentes en funcionalidad (aunque no la velocidad):
var a0 = $($('.answer')[0]);var a0 = $('.answer').first(); - ver http://api.jquery.com/first/var a0 = $('.answer:first'); - véase http://api.jquery.com/first-selector/var a0 = $('.answer').eq(0); - ver http://api.jquery.com/eq/var a0 = $('.answer:eq(0)'); - ver http://api.jquery.com/eq-selector/¿Cuál es el mejor?
has been hypothesized que las versiones del selector deberían ser más rápidas que las versiones del método (y la lógica tiene algún sentido) pero todavía no he encontrado un punto de referencia multi-documento y explorador confiable que pruebe que esto sea cierto.
Y en algunos casos no puede utilizar el selector, ya que tiene un objeto jQuery resultante de los resultados encadenados y más adelante debe reducirlo.
Editar: Basado en la información relevante a partir de pruebas de @ YC abajo, siguientes son los (2011-Feb-4) resultados de las pruebas actuales resumen y comparan contra una línea de base de .answer:first:
:first :eq(0) .first() .eq(0) $($('...')[0])
Chrome 8+ 100% 92% 224% 266% 367%
FF 3.6 100% 100% 277% 270% 309%
FF 4.0b 100% 103% 537% 521% 643%
Safari 5 100% 93% 349% 352% 467%
Opera 11 100% 103% 373% 374% 465%
IE 8 100% 101% 1130% 1246% 1767%
iPhone 4 100% 95% 269% 316% 403%
=====================================================
Weighted 100% 92% 286% 295% 405%
Major 100% 95% 258% 280% 366%
En resumen: la hipótesis es (actualmente) incorrecta. Los métodos son significativamente más rápidos que los selectores Sizzle, y casi sin excepción, el código OP $($('.answer')[0]) es el más rápido de todos.
': eq()' se basa en cero. Tal vez estabas pensando en [: nth-child()] (http://api.jquery.com/nth-child-selector/), ¿cuál está basado en una sola? –
Simplemente configure un JSPerf para estos http://jsperf.com/selecting-the-first. Por favor, ejecútelo en sus diferentes navegadores :) Mis primeras pruebas parecen indicar que, contrariamente a la hipótesis, los métodos son más rápidos que los selectores de sizzle. Esto no es sorprendente, ya que se sabe que los selectores Sizzle que no son CSS son bastante lentos. – Yahel
Nice edit. :). – Yahel
no puedo hablar con el aspecto de elegancia, pero el aspecto de rendimiento aquí realmente puede hacer una gran diferencia.
Parece que, from a set of JavaScript testing, que su método original es en realidad el más uno eficiente, y contrariamente a la hipótesis de que la respuesta aceptada vinculada a, los selectores no CSS del chisporroteo tienden a ser mucho menos eficiente que el método selectores Hay una razón para eso. El $('.answer') puede usar el navegador nativo getElementsByClass() sin tener que recorrer manualmente los resultados. El selector :first lo complica. En este caso, usar los selectores de sizzle parece ralentizar la selección por un factor de entre 4-5.
Argumentaría que, con jQuery, el rendimiento debe superar la elegancia, y todas las pruebas (¡cada navegador que he probado hasta ahora!) Parece indicar que la solución poco elegante de OP es la más rápida en una cantidad justa.
Éstos son los resultados de los navegadores con el mayor número de ejecuciones de prueba:
(Los números son 'operaciones por segundo', números de modo más altas son más rápidos, los números más bajos son más lentos.)
Según mi propia experiencia, he encontrado que '.first' puede ser realmente ineficiente en IE y que' $ ($ (foo) [0]) 'fue significativamente más rápido. Esto solo importa en el código crítico (piense '.each' en juegos grandes) – Raynos
Su versión, aunque poco elegante, parece ser de lejos la más eficiente. – Yahel
Es curioso cómo una pregunta sobre la elegancia se convirtió en una evaluación comparativa del rendimiento. –