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

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

Per esempio:

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

dà lo stesso risultato di:

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

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

children()guarda solo i figli immediati del nodo, mentre find()attraversa l'intero DOM sotto il nodo, quindi children() dovrebbe essere più veloce dato implementazioni equivalenti. Tuttavia, find()utilizza metodi browser 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).

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

Aggiornamento: secondo il commento di tvanfosson, ho creato un altro caso di test 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 Strumenti per gli sviluppatori di Chrome e ho notato che children () effettua chiamate interne 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 ().

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

Quelli non forniranno necessariamente lo stesso risultato: find()ti daranno un nodo discendente , mentre children()ti daranno solo figli immediati che corrispondono.

Ad un certo punto, è find()stato molto più lento poiché ha dovuto 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.

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

In effetti, anche usando il selettore ">" extra, .find()è ancora molto più veloce di .children(); sul mio sistema, 10 volte.

Quindi, dal mio punto di vista, non sembra esserci molta ragione per usare il meccanismo di filtraggio .children().

Entrambi find()e i children()metodi 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 singolo livello verso il basso.

Per semplificare:

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