web-dev-qa-db-fra.com

Avertissements d'utilisation jQuery inefficaces dans PHPStorm IDE

J'ai récemment mis à niveau ma version de PHPStorm IDE et il m'avertit maintenant d'une utilisation inefficace de jQuery.

Par exemple:

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

Invite cet avertissement:

Vérifie que les sélecteurs jQuery sont utilisés de manière efficace. Il suggère de diviser les sélecteurs descendants précédés du sélecteur d'ID et met en garde contre les sélecteurs dupliqués qui pourraient être mis en cache.

Ma question est donc:

Pourquoi est-ce inefficace et quelle est la manière efficace de faire le sélecteur ci-dessus?

Je devine:

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

Est-ce la bonne façon?

jqueryjquery-selectorsperformance
99
Brady

J'ai eu la même question aujourd'hui et j'ai pu trouver une solution grâce à Scott Kosman ici .

Fondamentalement, la réponse consiste à sélectionner les ID individuellement, puis à utiliser .find(...) pour tout ce qui suit. Prenons donc votre exemple:

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

Le changer en ceci rend PhpStorm heureux et peut évidemment être plus de deux fois plus rapide :

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

Je pense que la différence entre les deux méthodes lors de l'utilisation de versions récentes de jQuery et de navigateurs est négligeable. J'ai construit un test qui montre qu'il est maintenant en fait 10% plus rapide de faire un sélecteur combiné plutôt que de sélectionner sur id, puis de trouver un cas très simple:

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

Pour la sélection de plusieurs enfants par classe à n'importe quelle profondeur, la "recherche" semble être plus rapide:

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

Il y a eu quelques discussions à ce sujet sur les forums jQuery, mais ses 3 ans: https://forum.jquery.com/topic/which-jquery-selection-is-efficient Comme ils le soulignent ici, si vous effectuez de nombreuses opérations sur le même sélecteur d'ID, la plus grande amélioration des performances est trouvée en mettant en cache l'élément de niveau supérieur. D'un autre côté, si vous ne faites que quelques sélections, il n'y aura pratiquement aucune différence de performances.

C'est pourquoi je crois qu'IntelliJ surestime l'importance de ce style de code.

19
Leonya

La première question est d'appuyer sur Alt + Entrée, et sélectionnez le premier conseil dans la liste, puis appuyez sur Entrée, vous verrez ce qu'il pense de la manière la plus efficace.

14
UnixAgain