Avertissements d’utilisation inefficace de jQuery dans l’IDE PHPStorm

J’ai récemment mis à jour ma version de PHPStorm IDE et cela m’avertit 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 séparer les sélecteurs descendants qui sont préfacés par le sélecteur d’ID et avertit des sélecteurs dupliqués qui pourraient être mis en cache.

Donc ma question est:

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?

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 identifiants individuellement, puis d’utiliser .find(...) pour tout élément ci-dessous. Alors, prenons votre exemple:

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

En changeant cela, PhpStorm est heureux et peut être deux fois plus rapide :

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

Je crois 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é que de sélectionner un identifiant, 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 il a 3 ans: https://forum.jquery.com/topic/which-jquery-selection-is-efficient Comme ils le font remarquer ici, si vous faites beaucoup de opérations sur le même sélecteur d’identifiant, la plus grande amélioration des performances est obtenue en mettant en cache l’élément de premier niveau. D’un autre côté, si vous ne faites que quelques sélections, il n’y aura pratiquement aucune différence de performance.

Je pense donc qu’IntelliJ exagère l’importance de ce style de code.

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