Share
Als englische Sprecher sind unsere Gedanken darauf ausgerichtet, Daten und Text von links nach rechts zu interpretieren. Es stellt sich jedoch heraus, dass viele der modernen JavaScript-Selector-Engines (jQuery, YUI 3, NWMatcher) und die native querySelectorAll, Analysieren Sie die Auswahlzeichenfolgen von rechts nach links.
Es ist wichtig anzumerken, dass Sie sich in den meisten Fällen nicht zu viele Gedanken über die Leistung des Wählers machen müssen, solange Ihre Auswähler nicht störend wirken. Das Sizzle von jQuery ist unglaublich schnell und zuvorkommend.
Betrachten Sie den folgenden Selektor:
Accentsconagua
$ ('. box p'); Obwohl einige - in der Regel ältere - Auswahlmodule zunächst das DOM mit einem Element abfragen Klasse von Box, und dann weiter zu finden p Tags, die untergeordnet sind, funktioniert jQuery in umgekehrter Reihenfolge. Es beginnt mit der Abfrage des DOM nach alles Absatz-Tags auf der Seite, und funktioniert dann so, dass die übergeordneten Knoten nach oben gehen und danach suchen .Box.
Wir können die ausgezeichnete JsPerf.com-Website verwenden, um dies zu testen.
// Das Markup// Der Test // 1. $ ('# box p'); // 2. $ ('# box'). Find ('p');Hallo
Das Bild oben zeigt das mit finden() oder Kinder() ist je nach Browser ca. 20-30% schneller.
Die jQuery-Bibliothek verfügt über eine Optimierung, die sofort bestimmt, ob eine Ich würde wurde an das jQuery-Objekt übergeben ( $ ('# box') ). Wenn dies der Fall ist, muss Sizzle nicht verwendet werden. Stattdessen übergibt er schnell den Selektor an getElementById. Und natürlich, wenn der Browser modern genug ist, querySelectorAll wird für Sizzle übernehmen.
Auf der anderen Seite mit $ ('# box p'), jQuery muss diese Zeichenfolge mit der Sizzle-API analysieren, was etwas länger dauert (obwohl Sizzle eine Auswahl für Selektoren hat, die mit einer beginnen Ich würde). Genau aus diesem Grund ist es auch etwas schneller $ ('. elems'). first () Über $ ('. elems: first'). Der letztere Selektor muss analysiert werden.
Lassen Sie uns ein anderes Beispiel betrachten:
$ ('# container>: disabled'); Diese Auswahl scheint angemessen. Finden Sie alle deaktivierten Eingaben (oder tatsächlich Elemente), die sich darin befinden #Container. Wie wir jedoch gelernt haben, sind jQuery und das native Programm querySelectorAll Arbeit von rechts nach links. Dies bedeutet, dass jQuery jedes Element im DOM buchstäblich packt und ermittelt, ob sein Element vorhanden ist deaktiviert Attribut ist auf true gesetzt. Beachten Sie, dass es keine Vorfilterung gibt, um zuerst alle Eingaben auf der Seite zu finden. Stattdessen wird jedes Element im DOM abgefragt.
// Aus der jQuery-Quelle deaktiviert: function (elem) return elem.disabled === true;
Sobald eine Sammlung kompiliert wurde, reist sie die Kette hinauf zum übergeordneten Element und ermittelt, ob es sich um eine Sammlung handelt #Container. Sicherlich ist dies nicht effektiv, und obwohl es wahr ist, dass in der Community möglicherweise zu viel Aufmerksamkeit auf die Leistung von Selektoren gelegt wird, sollten wir trotzdem versuchen, nicht zu intensive Selektoren zu schreiben, wenn möglich.
Sie können diese Auswahl etwas verbessern, indem Sie Folgendes tun:
// Better $ ('# container> input: disabled'); Dieser Code beschränkt die Abfrage zunächst auf alle Eingaben auf der Seite (und nicht auf jeden Element). Besser noch, wir können die wieder verwenden finden oder Kinder Methode.
$ ('# container'). children ('input: disabled'); Es ist wichtig für mich zu wiederholen, dass Sie sich ehrlich gesagt nicht allzu viele Sorgen um die Auswahlleistung machen müssen. Es gibt viele Optimierungen in jQuery, die Ihnen dabei helfen werden. Im Allgemeinen ist es besser, sich auf größere Ticketelemente wie Codeorganisation und -struktur zu konzentrieren.
Als Beispiel, wenn Sizzle auf einen Selektor stößt, wie $ ('# box p'), Es ist wahr, dass es von rechts nach links funktioniert, aber es gibt auch eine schnelle Regex-Optimierung, die zuerst bestimmt, ob der erste Abschnitt des Selektors ein ist Ich würde. Wenn ja, wird es als Kontext verwendet, wenn nach den Absatz-Tags gesucht wird.
Trotzdem ist es immer hilfreich zu wissen, was hinter den Kulissen passiert - zumindest auf einem sehr niedrigen Niveau.
