Cosa sono i bambini più veloci () o find () in jQuery?

Question

Per selezionare un nodo figlio in jQuery è possibile usare children () ma anche find ().

Ad esempio:

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

fornisce lo stesso risultato di:

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

Ora, quale opzione è più veloce o preferita e perché?

Answer 1

children () guarda solo ai figli immediati del nodo, mentre find () attraversa l'intero DOM sotto il nodo, quindi children () dovrebbe essere più veloci date implementazioni equivalenti. Tuttavia, find () utilizza i metodi nativi , mentre children () utilizza JavaScript interpretato nel browser. Nei miei esperimenti non c'è molta differenza di prestazioni nei casi tipici.

Quale utilizzare dipende dal fatto che si desideri considerare solo i discendenti immediati o tutti i nodi al di sotto di questo nel DOM, ovvero scegliere il metodo appropriato in base ai risultati desiderati, non alla velocità del metodo. Se le prestazioni sono davvero un problema, allora sperimenta per trovare la soluzione migliore e usala (o vedi alcuni dei benchmark nelle altre risposte qui).

Answer 2

Questo test jsPerf suggerisce che find () è più veloce. Ho creato un test più approfondito e sembra che find () superi le prestazioni i bambini ().

Aggiornamento: come da commento di tvanfosson, ho creato un altro test un altro test case con 16 livelli di annidamento. find () è più lento solo quando trova tutti i div possibili, ma find () supera ancora i bambini () quando si seleziona il primo livello di div.

children () inizia a sovraperformare find () quando ci sono oltre 100 livelli di annidamento e circa 4000+ div per essere trovati da find (). È un caso di test rudimentale, ma penso ancora che find () sia più veloce dei bambini () nella maggior parte dei casi.

Ho esaminato il codice jQuery in Chrome Developer Tools e ho notato che children () effettua internamente chiamate a sibling (), filter () e passa attraverso alcune regex in più rispetto a find ().

find () e children () soddisfano esigenze diverse, ma nei casi in cui find () e children () generano lo stesso risultato, consiglio di utilizzare find ().

Answer 3

Ecco un link con un test delle prestazioni che puoi eseguire. find () è in realtà circa 2 volte più veloce di children () .

Answer 4

Questi non daranno necessariamente lo stesso risultato: find () ti porterà qualsiasi nodo discendente , mentre children () ti darà solo figli immediati che corrispondono.

A un certo punto, find () era molto più lento poiché doveva cercare ogni nodo discendente che potesse essere una corrispondenza, e non solo figli immediati. Tuttavia, questo non è più vero; find () è molto più veloce grazie all'utilizzo di metodi browser nativi.

Answer 5

Nessuna delle altre risposte ha affrontato il caso dell'uso di .children () o .find (" > ") per solo cerca i figli immediati di un elemento genitore. Quindi, ho creato un test jsPerf per scoprirlo , usando tre modi diversi per distinguere i bambini.

Come succede, anche quando si utilizza l'extra " > " selettore, .find () è ancora un lotto più veloce di .children () ; sul mio sistema, 10 volte.

Quindi, dal mio punto di vista, non sembrano esserci molte ragioni per usare il meccanismo di filtro di .children () .

Answer 6

  

Entrambi i metodi find () e children () vengono utilizzati per filtrare il figlio degli elementi corrispondenti, tranne per il fatto che il primo percorre qualsiasi livello verso il basso, il secondo percorre un livello inferiore.

Per semplificare:

1. find () - cerca tra gli elementi corrispondenti figlio, nipote, pronipote ... tutti i livelli giù.
2. children () : cerca solo il figlio degli elementi corrispondenti (livello singolo giù).