¿Qué es niños más rápidos () o find () en jQuery?

Para seleccionar un nodo hijo 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é?

children()solo mira a los hijos inmediatos del nodo, mientras 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 uso depende de si solo desea considerar los descendientes inmediatos o todos los nodos debajo de este en el DOM, es decir, elegir el método apropiado en función de 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 úsela (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 anidamiento. find () solo es más lento cuando se encuentran todos los divs posibles, pero find () aún supera a los hijos () al seleccionar 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.

Pasé por el código jQuery en Chrome Developer Tools y noté que children () internamente hace llamadas a sibling (), filter (), y pasa por algunas expresiones regulares más que find ().

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

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

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

En un momento, find()fue mucho más lento ya que tenía que buscar todos los nodos descendientes que pudieran 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.

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

De hecho, incluso cuando se usa el selector ">" adicional, .find()sigue siendo mucho más rápido que .children(); en mi sistema, 10 veces más.

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

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

Simplificar:

1. find() - busca a través de elementos coincidentes hijo, nieto, bisnieto ... todos los niveles hacia abajo.
2. children() - buscar solo en el elemento secundario de los elementos coincidentes (nivel inferior).