jquery - example - ul children in javascript

¿Qué es más rápido children() o find() en jQuery?

Question

Para seleccionar un nodo secundario en jQuery, se puede usar children () pero también find ().

Por ejemplo:

$(this).children(''.foo'');

da el mismo resultado que:

$(this).find(''.foo'');

Ahora, ¿qué opción es la más rápida o preferida y por qué?

Answer 1

Los métodos find() y children() se utilizan para filtrar el elemento secundario de los elementos emparejados, excepto que el primero se desplaza a cualquier nivel hacia abajo, el último se desplaza a un solo nivel hacia abajo.

Simplificar:

1. find() : busca entre los elementos emparejados: hijo, nieto, bisnieto ... todos los niveles hacia abajo.
2. children() : busca a través de los elementos de los elementos emparejados solo (nivel único hacia abajo).

Answer 2

Aquí hay un enlace que tiene una prueba de rendimiento que puede ejecutar. find() es en realidad 2 veces más rápido que los children() .

Answer 3

Esos no necesariamente darán el mismo resultado: find() obtendrá cualquier nodo descendente , mientras que children() solo obtendrá hijos inmediatos que coincidan.

En un momento dado, find() era mucho más lento, ya que tenía que buscar cada nodo descendiente que pudiera coincidir, y no solo los hijos inmediatos. Sin embargo, esto ya no es cierto; find() es mucho más rápido debido al uso de métodos de navegador nativos.

Answer 4

Esta prueba jsPerf sugiere que find () es más rápido. Creé una prueba más exhaustiva , y todavía parece que find () supera a los niños ().

Actualización: De acuerdo con el comentario de tvanfosson, creé otro caso de prueba con 16 niveles de anidación. find () solo es más lento cuando encuentra todos los divs posibles, pero find () aún supera a los niños () cuando selecciona el primer nivel de divs.

children () comienza a superar a find () cuando hay más de 100 niveles de anidamiento y alrededor de 4000 divs para find () para atravesar. Es un caso de prueba rudimentario, pero sigo pensando que find () es más rápido que los niños () en la mayoría de los casos.

Recorrí el código de jQuery en Chrome Developer Tools y noté que children () internamente realiza llamadas a hermanos (), filter (), y pasa por unas pocas expresiones regulares más que find ().

find () y children () satisfacen diferentes necesidades, pero en los casos en los que find () y children () producirían el mismo resultado, recomendaría usar find ().

Answer 5

Ninguna de las otras respuestas abordó el caso de usar .children() o .find(">") para buscar solo los hijos inmediatos de un elemento padre. Entonces, creé una prueba jsPerf para descubrir , usando tres formas diferentes de distinguir a los niños.

A medida que sucede, incluso cuando se usa el selector ">" adicional, .find() sigue siendo mucho más rápido que .children() ; en mi sistema, 10x asi.

Entonces, desde mi perspectiva, no parece haber muchas razones para usar el mecanismo de filtrado de .children() en absoluto.

Answer 6

children() solo mira a los hijos inmediatos del nodo, mientras que find() atraviesa todo el DOM debajo del nodo, por lo que children() debería ser más rápido con implementaciones equivalentes. Sin embargo, find() usa métodos de navegador nativos , mientras que children() usa JavaScript interpretado en el navegador. En mis experimentos no hay mucha diferencia de rendimiento en casos típicos.

El tipo de uso depende de si solo desea considerar los descendientes inmediatos o todos los nodos debajo de este en el DOM, es decir, elija el método apropiado en función de los resultados que desea, no de la velocidad del método. Si el rendimiento es realmente un problema, entonces experimente para encontrar la mejor solución y úselo (o vea algunos de los puntos de referencia en las otras respuestas aquí).