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

Para seleccionar un nodo secundario en jQuery uno 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é?

children() solo mira a los hijos inmediatos del nodo, mientras que find() recorre 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 nativos del navegador, mientras que children() usa JavaScript interpretado en el navegador. En mis experimentos, no hay mucha diferencia de rendimiento en casos típicos.

Lo que debe usar 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 según los resultados que desee, no la velocidad del método. Si el rendimiento es realmente un problema, entonces experimente para encontrar la mejor solución y use eso (o vea algunos de los puntos de referencia en las otras respuestas aquí).

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: según el comentario de tvanfosson, creé otro caso de prueba con 16 niveles de anidación. find () solo es más lento cuando se encuentran todos los div posibles, pero find () aún supera a children () cuando se selecciona el primer nivel de divs.

children () comienza a superar a find () cuando hay más de 100 niveles de anidación y alrededor de 4000+ divs para que find () recorra. Es un caso de prueba rudimentario, pero todavía creo que find () es más rápido que los niños () en la mayoría de los casos.

Pasé por el código jQuery en Herramientas para desarrolladores de Chrome y noté que children () internamente realiza llamadas a sibling (), filter () y pasa por algunas expresiones más que lo hace find ().

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

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

Chrome en OSX10.7.6

Esos no necesariamente darán el mismo resultado: find() obtendrá cualquier nodo descendiente , 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 verdad; find() es mucho más rápido debido al uso de métodos de navegador nativos.

Ninguna de las otras respuestas se refería al caso de utilizar .children() o .find(">") para buscar únicamente hijos .find(">") de un elemento primario. Entonces, creé una prueba jsPerf para descubrir , usando tres formas diferentes de distinguir niños.

Como sucede, incluso cuando se usa el selector extra “>”, .find() es aún mucho más rápido que .children() ; en mi sistema, 10x entonces.

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

Ambos métodos, find() y children() , se utilizan para filtrar al niño de los elementos coincidentes, excepto que el primero se desplaza a cualquier nivel hacia abajo, el último se desplaza un solo nivel hacia abajo.

Simplificar:

  1. find() – busca a través de elementos emparejados ‘hijo, nieto, bisnieto … todos los niveles bajos.
  2. children() – busca a través del elemento secundario de los elementos emparejados (nivel único hacia abajo).