¿Qué es niños más rápidos () 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 más rápida o preferida y por qué?

Answer 1

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

Qué usar 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, experimente para encontrar la mejor solución y úsela (o vea algunos de los puntos de referencia en las otras respuestas aquí).

Answer 2

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

Actualización: Según el comentario de tvanfosson, creé otra prueba caso 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 que find () atraviese. Es un caso de prueba rudimentario, pero sigo pensando que find () es más rápido que children () en la mayoría de los casos.

Revisé 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 ().

Answer 3

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

Answer 4

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, 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.

Answer 5

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

Como sucede, incluso cuando se usa el " > " extra selector, .find () sigue siendo un lote más rápido que .children () ; en mi sistema, 10 veces más.

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

Answer 6

  Los métodos

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

Para simplificar:

1. find () & # 8211; buscar a través de los elementos coincidentes & # 8217; hijo, nieto, bisnieto ... todos los niveles bajos.
2. children () & # 8211; buscar a través de los elementos coincidentes & # 8217; solo hijo (nivel inferior).