Was sind die schnellsten Kinder () oder find () in jQuery?

Um einen untergeordneten Knoten in jQuery auszuwählen, können Sie untergeordnete (), aber auch find () verwenden.

Zum Beispiel:

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

ergibt das gleiche Ergebnis wie:

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

Welche Option ist am schnellsten oder bevorzugtesten und warum?

children()Betrachtet nur die unmittelbaren untergeordneten Elemente des Knotens, während find()das gesamte DOM unterhalb des Knotens durchlaufen wird, children() sollte dies bei gleichwertigen Implementierungen schneller sein. Verwendet find()jedoch native Browsermethoden, während im Browser interpretiertes JavaScriptchildren() verwendet wird. In meinen Experimenten gibt es in typischen Fällen keinen großen Leistungsunterschied.

Welche zu verwenden ist, hängt davon ab, ob Sie nur die unmittelbaren Nachkommen oder alle Knoten unter diesem im DOM berücksichtigen möchten, dh wählen Sie die geeignete Methode basierend auf den gewünschten Ergebnissen und nicht auf der Geschwindigkeit der Methode. Wenn Leistung wirklich ein Problem ist, experimentieren Sie, um die beste Lösung zu finden, und verwenden Sie diese (oder sehen Sie sich einige der Benchmarks in den anderen Antworten hier an).

Dieser jsPerf-Test legt nahe, dass find () schneller ist. Ich habe einen gründlicheren Test erstellt , und es sieht immer noch so aus, als ob find () Kinder () übertrifft.

Update: Gemäß dem Kommentar von tvanfosson habe ich einen weiteren Testfall mit 16 Verschachtelungsebenen erstellt. find () ist nur langsamer, wenn alle möglichen Divs gefunden werden, find () übertrifft jedoch immer noch child (), wenn die erste Ebene von divs ausgewählt wird.

Kinder () beginnen, find () zu übertreffen, wenn mehr als 100 Verschachtelungsebenen und mehr als 4000 Divs für find () zu durchlaufen sind. Es ist ein rudimentärer Testfall, aber ich denke immer noch, dass find () in den meisten Fällen schneller ist als children ().

Ich habe den jQuery-Code in den Chrome Developer Tools durchgesehen und festgestellt, dass children () intern sibling (), filter () aufruft und einige weitere reguläre Ausdrücke durchläuft als find ().

find () und children () erfüllen unterschiedliche Anforderungen, aber in den Fällen, in denen find () und children () dasselbe Ergebnis ausgeben würden, würde ich die Verwendung von find () empfehlen.

Hier ist ein Link mit einem Leistungstest, den Sie ausführen können. find()ist eigentlich etwa 2 mal schneller als children().

Diese führen nicht unbedingt zum gleichen Ergebnis: find()Sie erhalten einen Nachkommenknoten , während Sie children()nur unmittelbare Kinder erhalten , die übereinstimmen.

Zu einem bestimmten Zeitpunkt find()war es viel langsamer, da nach jedem Nachkommenknoten gesucht werden musste, der übereinstimmen könnte, und nicht nur nach unmittelbaren Kindern. Dies ist jedoch nicht mehr wahr; find()ist aufgrund der Verwendung nativer Browsermethoden viel schneller.

Keiner der anderen Antworten befasste sich mit dem Fall der Verwendung .children()oder .find(">")zu nur für den sofortigen Kinder eines Elternelement zu suchen. Deshalb habe ich einen jsPerf-Test erstellt, um dies herauszufinden. Dabei wurden drei verschiedene Methoden zur Unterscheidung von Kindern verwendet.

Selbst wenn Sie den zusätzlichen ">" Selektor verwenden, .find()ist dies immer noch viel schneller als.children() ; auf meinem System 10x so.

Aus meiner Sicht scheint es also nicht viel Grund zu geben, den Filtermechanismus .children()überhaupt zu verwenden.

Beide find()und children()Methoden werden verwendet, um das untergeordnete Element der übereinstimmenden Elemente zu filtern, außer dass das erstere eine beliebige Ebene nach unten und das letztere eine einzelne Ebene nach unten fährt.

Vereinfachen:

1. find() - Durchsuche das Kind, Enkel, Urenkel der übereinstimmenden Elemente ... alle Ebenen nach unten.
2. children() - Durchsuchen Sie nur das untergeordnete Element der übereinstimmenden Elemente (einzelne Ebene nach unten).