La forma más apropiada de obtener esto: $($(“.answer”)[0])

5 minutos de lectura

avatar de usuario
maullar

Supongamos que quiero obtener el primer elemento entre todos los elementos de la clase “.respuesta”

$($(".answer")[0])

Puedo hacer lo anterior, pero ¿cuál es el mejor equilibrio entre elegancia y velocidad?

*cambió la pregunta para reflejar la discusión actual

  • Por mi propia experiencia he encontrado que .first puede ser realmente ineficiente en IE y eso $($(foo)[0]) fue significativamente más rápido. Esto solo importa en el código crítico (piense .each en conjuntos grandes)

    – Raynos

    29 de enero de 2011 a las 16:29

  • Su versión, aunque poco elegante, parece ser, con mucho, la más eficiente.

    – Yahel

    3 de febrero de 2011 a las 17:20

  • Es curioso cómo una pregunta sobre la elegancia se convirtió en una evaluación comparativa del rendimiento.

    –David Tang

    4 de febrero de 2011 a las 0:52

  • @box9 esta es una ilustración increíble del poder de SO

    – maullar

    4 de febrero de 2011 a las 7:05

avatar de usuario
Yahel

No puedo hablar del aspecto de la elegancia, pero el aspecto del rendimiento aquí puede marcar una gran diferencia.

Parece que, de un conjunto de pruebas de JavaScriptque su método original es en realidad el la mayoría eficiente, y contrariamente a la hipótesis a la que se vincula la respuesta aceptada, los selectores de Sizzle que no son CSS tienden a ser mucho menos eficientes que los selectores de métodos. Hay una razón para eso. los $('.answer') puede usar el navegador nativo getElementsByClass() sin tener que recorrer manualmente los resultados. los :first selector complica eso. En este caso, el uso de los selectores de chisporroteo parece ralentizar la selección en un factor de entre 4 y 5.

Yo diría que, con jQuery, el rendimiento debería triunfar sobre la elegancia, y toda la evidencia (¡todos los navegadores que he probado hasta ahora!) parece indicar que la solución poco elegante de OP es la más rápida por una buena cantidad.

Estos son los resultados de los navegadores con más ejecuciones de prueba:

ingrese la descripción de la imagen aquí

(Los números son ‘operaciones por segundo’, por lo que los números más altos son más rápidos, los números más bajos son más lentos).

  • Creo que sería beneficioso ejecutar también pruebas en árboles de documentos más complejos.

    – Çağdaş Tekin

    3 de febrero de 2011 a las 17:25

  • Por curiosidad, ¿por qué argumentarías que con jQuery, el rendimiento triunfa sobre la elegancia? De hecho, diría lo contrario, especialmente si el usuario no puede notar la diferencia.

    – Xavi

    3 de febrero de 2011 a las 17:26

  • @Xavi Para una selección, el usuario no puede notar la diferencia, pero si está creando una aplicación con mucho jQuery, estas diferencias pueden acumularse, particularmente en los navegadores de gama baja. Si un método es literalmente 5 veces más rápido que otro método, esa diferencia tiene un impacto.

    – Yahel

    3 de febrero de 2011 a las 17:32

  • Fundamentalmente, hice esto para refutar la creciente sabiduría convencional de que los selectores Sizzle son más efectivos. Me sorprendió, en realidad, que la versión de OP fuera la más rápida; Yo estaba esperando .eq(0) o .first() para ser más rápido

    – Yahel

    3 de febrero de 2011 a las 17:38

  • Solo un comentario rápido a la nota de yahelc sobre la importancia del rendimiento. En los navegadores móviles, la eficiencia de su js hace una diferencia ENORME y extremadamente notable en la UX

    – maullar

    16 de junio de 2011 a las 6:34

avatar de usuario
Phrogz

Los siguientes son todos equivalentes en funcionalidad (aunque no en velocidad):

¿Cual es el mejor?

Se ha planteado la hipótesis de que las versiones del selector debería sea ​​más rápido que las versiones del método (y la lógica tiene cierto sentido), pero aún no he encontrado un punto de referencia confiable para varios navegadores y documentos que demuestre que esto es cierto.

Y en algunos casos no puede usar el selector, ya que tiene un objeto jQuery resultante de resultados encadenados y luego debe reducirlo.

Editar: Con base en la excelente información de las pruebas de @yc a continuación, a continuación se resumen los resultados de las pruebas actuales (4 de febrero de 2011) y se comparan con una línea 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%
  • los Ponderado la línea muestra el rendimiento ponderado por el número de pruebas por navegador; los navegadores populares (entre los que se prueban) se cuentan con más fuerza.
  • los Importante La línea muestra lo mismo, solo que incluye versiones no beta de los principales navegadores de escritorio.

En resumen: la hipótesis es (actualmente) incorrecta. Los métodos son significativamente más rápidos que los selectores de Sizzle y, casi sin excepción, el código del OP $($('.answer')[0]) es el más rápido de todos!

  • :eq() es de base cero. Tal vez estabas pensando en :nth-child()que es de base uno?

    – Frederic Hamidi

    29 de enero de 2011 a las 16:31

  • Simplemente configure un JSPerf para estos jsperf.com/seleccionando-el-primero . Ejecútelo en sus distintos navegadores 🙂 Mis primeras pruebas parecen indicar que, contrariamente a la hipótesis, los métodos son más rápidos que los selectores chisporroteos. Esto no es sorprendente, ya que se sabe que los selectores de Sizzle que no son CSS son bastante lentos.

    – Yahel

    3 de febrero de 2011 a las 15:41

  • Nota: los porcentajes en la tabla parecen ser velocidad, no duración.

    – LarsH

    19/10/2011 a las 21:39

avatar de usuario
karim79

Utilizar el :first seleccionador o el .first método de filtro:

$(".answer:first");

o:

$(".answer").first();

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad