Avertissements d'utilisation de jQuery inefficaces dans l'IDE PHPStorm

J'ai récemment mis à jour ma version de PHPStorm IDE et il me prévient maintenant de l'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 qui sont précédés du sélecteur d'ID et avertit des 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 devinerais à:

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

Est-ce la bonne manière?

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 est de sélectionner les ID individuellement, puis de les utiliser .find(...)pour tout ce qui est ci-dessous. Prenons donc votre exemple:

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

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

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

Je pense que la différence entre les deux méthodes lors de l'utilisation des versions récentes de jQuery et des navigateurs est négligeable. J'ai construit un test qui montre qu'il est maintenant 10% plus rapide de faire un sélecteur combiné plutôt que de sélectionner sur id et de trouver ensuite pour 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 une discussion à ce sujet sur les forums jQuery, mais il a 3 ans: https://forum.jquery.com/topic/which-jquery-selection-is-effic Comme ils le soulignent ici, si vous faites beaucoup de opérations sur le même sélecteur d'identifiant, 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.

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