3

Para seleccionar los descendientes (inmediatos o no) de un elemento en jQuery podría utilizar alguno de estos métodos:

  • Selección con CSS:

    $("#padre .descendientes")
    
  • Selección usando un entorno (suponemos que $padre es $("#padre")):

    $(".descendientes", $padre)
    
  • Selección usando find (suponemos que $padre es $("#padre")):

    $padre.find(".descendientes")
    

Con los tres parece que obtengo los mismos resultados, ¿existe alguna diferencia entre ellos?¿es alguno de ellos más rápido o eficiente?

2 respuestas 2

4

He hecho un test con Benchmark y uno simple.

Y al parecer $padre.find(".descendientes"); es el más rapido.


Ver el test con Benchmark

Resultado con Benchmark:

Test 1: $("#padre .descendientes")     x 469,189 ops/sec ±7.24% (80 runs sampled)
Test 2: $(".descendientes", $padre)    x 690,551 ops/sec ±0.73% (95 runs sampled)                           
Test 3: $padre.find(".descendientes")  x 743,511 ops/sec ±0.89% (91 runs sampled)

// El más rapido: Test 3

Ver el test simple (Ver los resultados en consola)

Resultado test simple:

Test 1: $("#padre .descendientes")    3361.640ms
Test 2: $(".descendientes", $padre)   2418.249ms
Test 3: $padre.find(".descendientes") 2287.109ms

// El más rapido: Test 3
2

$("#padre .descendientes") Analizan el selector luego llaman a : $('#padre ').children().filter('.descendientes') y $('#padre').filter('.descendientes') respectivamente.

$(".descendientes", $padre) es idéntico a $padre.find(".descendientes")

$padre.find(".descendientes") siempre será el más rápido

Prueba de ello Test Selectors Test Adicional children-vs-find

En realidad, no tiene que preocuparse de lo que es más rápido (a menos que usted está haciendo una manipulación muy grandes del dom) ... jQuery fue construido para ser impresionante rápido.

Referencia https://stackoverflow.com/questions/3177763/what-is-the-fastest-method-for-selecting-descendant-elements-in-jquery

2
  • Si el segundo y el tercero son idénticos, ¿por qué uno es siempre más rápido que el otro?
    – Alvaro Montoro
    Commented el 24 oct. 2016 a las 10:31
  • @AlvaroMontoro según la documentación de jQuery, al utilizar el contexto, este es convertido a .find(), por lo cual el segundo método tomaría al menos un "paso" adicional comparado con el tercero. api.jquery.com/jQuery/#jQuery-selector-context
    – Shaz
    Commented el 24 oct. 2016 a las 17:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.