Was ist die schnellste children() oder find() in jQuery?

Question

Um einen Kindknoten in jQuery auszuwählen, kann man children(), aber auch find() verwenden.

Zum Beispiel:

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

ergibt das gleiche Ergebnis wie:

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

Welche Option ist nun die schnellste oder bevorzugte und warum?

Answer 1

children() betrachtet nur die unmittelbaren Kinder des Knotens, während find() durchläuft das gesamte DOM unterhalb des Knotens, so dass children() sollte bei gleichwertigen Implementierungen schneller sein. Allerdings, find() verwendet einheimische Browser-Methoden, während children() verwendet JavaScript im Browser interpretiert. In meinen Experimenten gab es in typischen Fällen keinen großen Leistungsunterschied.

Welche Methode Sie verwenden sollten, hängt davon ab, ob Sie nur die unmittelbaren Nachkommen oder alle Knoten unterhalb dieses Knotens im DOM berücksichtigen möchten, d. h. wählen Sie die geeignete Methode anhand der gewünschten Ergebnisse und nicht anhand der Geschwindigkeit der Methode. Wenn die Leistung wirklich ein Problem ist, dann 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).

Answer 2

Diese jsPerf-Test legt nahe, dass find() schneller ist. Ich habe eine gründlichere Prüfung und es sieht immer noch so aus, als ob find() besser abschneidet als children().

Aktualisierung: Wie in tvanfossons Kommentar beschrieben, habe ich ein weiterer Testfall mit 16 Verschachtelungsebenen. find() ist nur langsamer, wenn es alle möglichen divs findet, aber find() ist immer noch besser als children(), wenn es die erste Ebene der divs auswählt.

children() beginnt, find() zu übertreffen, wenn es mehr als 100 Verschachtelungsebenen und mehr als 4000 Divs gibt, die find() durchlaufen muss. Es ist ein rudimentärer Testfall, aber ich denke immer noch, dass find() in den meisten Fällen schneller ist als children().

Ich bin den jQuery-Code in den Chrome-Entwickler-Tools durchgegangen und habe festgestellt, dass children() intern sibling() und filter() aufruft und ein paar mehr Regexes durchläuft als find().

find() und children() erfüllen unterschiedliche Anforderungen, aber in den Fällen, in denen find() und children() das gleiche Ergebnis liefern würden, würde ich empfehlen, find() zu verwenden.

Answer 3

Hier ist eine Verbindung die einen Leistungstest enthält, den Sie durchführen können. find() ist tatsächlich etwa 2 Mal schneller als children() .

Answer 4

Diese führen nicht unbedingt zu demselben Ergebnis: [find()](http://docs.jquery.com/Traversing/find) erhalten Sie jede Nachkomme Knoten, während [children()](http://docs.jquery.com/Traversing/children) wird nur dazu führen, dass Sie unmittelbare Kinder die übereinstimmen.

Zu einem bestimmten Zeitpunkt, find() war viel langsamer, da es nach jedem Nachfolgeknoten suchen musste, der ein Treffer sein könnte, und nicht nur nach den unmittelbaren Kindern. Dies ist jedoch nicht mehr der Fall; find() ist durch die Verwendung nativer Browsermethoden viel schneller.

Answer 5

Keine der anderen Antworten befasste sich mit dem Fall der Verwendung von .children() o .find(">") a sólo Suche nach unmittelbaren Kindern eines übergeordneten Elements. Ich habe also eine jsPerf-Test, um das herauszufinden Die Kinder werden auf drei verschiedene Arten unterschieden.

Dies gilt auch dann, wenn Sie den zusätzlichen Selektor ">" verwenden, .find() ist immer noch ein Los schneller als .children() auf meinem System 10x so.

Aus meiner Sicht gibt es also keinen Grund, den Filtermechanismus von .children() überhaupt nicht.