Ineffiziente Warnungen zur Verwendung von jQuery in der PHPStorm-IDE

100

Ich habe kürzlich meine Version von PHPStorm IDE aktualisiert und warne mich jetzt vor ineffizienter jQuery-Nutzung.

Beispielsweise:

var property_single_location = $("#property [data-role='content'] .container");

Fordert diese Warnung auf:

Überprüft, ob jQuery-Selektoren effizient verwendet werden. Es wird empfohlen, Nachkommen-Selektoren zu teilen, denen der ID-Selektor vorangestellt ist, und vor doppelten Selektoren zu warnen, die zwischengespeichert werden könnten.

Meine Frage lautet also:

Warum ist dies ineffizient und wie kann der oben genannte Selektor effizient ausgeführt werden?

Ich würde raten bei:

var property_single_location = $("#property").find("[data-role='content']").find(".container");

Ist das der richtige Weg?

jquery jquery-selectors performance Scott
quelle

Antworten:

156

Ich hatte heute die gleiche Frage und konnte dank Scott Kosman hier eine Lösung finden .

Grundsätzlich besteht die Antwort darin, die IDs einzeln auszuwählen und dann .find(...)für die folgenden Zwecke zu verwenden. Nehmen Sie also Ihr Beispiel:

$("#property [data-role='content'] .container");

Wenn Sie dies ändern, ist PhpStorm glücklich und kann offensichtlich mehr als doppelt so schnell sein :

$("#property").find("[data-role='content'] .container");
MikeSchinkel
quelle
1
Für meinen Geschmack $ ('[data-role = "content"] .container', '#property'); ist besser lesbar.
n3rd
26
@ n3rd Witzig, ich finde diesen Ansatz überhaupt nicht lesbar, aber zu jedem seinen eigenen sagen sie.
MikeSchinkel
19

Ich glaube, der Unterschied zwischen den beiden Methoden bei der Verwendung neuerer Versionen von jQuery und Browsern ist vernachlässigbar. Ich habe einen Test erstellt, der zeigt, dass es jetzt tatsächlich 10% schneller ist, einen kombinierten Selektor anstelle einer Auswahl anhand der ID durchzuführen und dann einen sehr einfachen Fall zu finden:

http://jsperf.com/jquery-find-vs-insel

Bei der Auswahl mehrerer Kinder nach Klassen in jeder Tiefe scheint der "Fund" schneller zu sein:

http://jsperf.com/jquery-find-vs-insel/7

Es gab einige Diskussionen darüber in jQuery-Foren, aber es ist 3 Jahre alt: https://forum.jquery.com/topic/which-jquery-selection-is-efficient Wie sie hier hervorheben, wenn Sie viel tun Bei Operationen mit demselben ID-Selektor wird die größte Leistungsverbesserung durch Zwischenspeichern des Elements der obersten Ebene erzielt. Wenn Sie jedoch nur einige wenige Auswahlen treffen, gibt es praktisch keinen Leistungsunterschied.

Daher glaube ich, dass IntelliJ die Bedeutung dieses Codestils überbewertet.

Leonya
quelle
4
In Ihrem ersten Test verwenden Sie die Direktwahl ">". Ich habe Ihren ersten Test ohne ">" durchgeführt und die Verwendung von "find" ist schneller. jsperf.com/jquery-find-vs-insel/12
beardedlinuxgeek
Das Interessanteste daran ist, dass die neuesten Versionen von Safari die direkte Methode um etwa 25% am schnellsten verarbeiten. Ich weiß nicht, was sie getan haben, aber anscheinend haben sich alle anderen Browser nicht durchgesetzt.
Uxonith
14

Die erste Frage ist, Alt + Eingabetaste zu drücken und den ersten Tipp in der Liste auszuwählen. Drücken Sie dann die Eingabetaste, um zu sehen, was Ihrer Meinung nach am effizientesten ist.

UnixAgain
quelle