Avertissements d'utilisation de jQuery inefficaces dans PHPStorm IDE

Question

J'ai récemment mis à jour ma version de PHPStorm IDE et à présent, il me prévient à propos inefficace l'utilisation de jQuery.

Par exemple:

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

Les invites de cet avertissement:

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

Donc ma question est:

Pourquoi est-ce inefficaces et qu'est-ce que la façon efficace de le faire ci-dessus le sélecteur?

Je pense à:

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

Est-ce la bonne manière?

Answer 1

J'ai eu la même question aujourd'hui et a été en mesure de trouver une solution grâce à Scott Kosman ici.

Fondamentalement, la réponse est de sélectionner Id individuellement et ensuite utiliser .find(...) pour rien en dessous. Donc, en prenant votre exemple:

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

Changer à ce fait PhpStorm heureux et peut évidemment être plus de deux fois plus rapide:

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

Answer 2

Je crois que la différence entre les deux méthodes lorsque vous utilisez les dernières versions de jQuery et des navigateurs est négligeable. J'ai construit un test qui montre qu'il est maintenant, en fait 10% de plus pour faire un combiné sélecteur plutôt que de sélection de l'id et ensuite trouver 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, le "trouver" semble être plus rapide:

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

Il y a des discussions à ce sujet sur jQuery forums, mais ses 3 ans: https://forum.jquery.com/topic/which-jquery-selection-is-efficient Comme ils le soulignent les ici, si vous faites beaucoup d'opérations sur le même sélecteur d'id, la plus grande amélioration de la performance est jugée par la mise en cache de l'élément de niveau supérieur. D'autre part, si vous faites juste un peu de sélections, il va y avoir pratiquement aucune différence de performances.

À cet effet, je crois que l'Ide est de surestimer l'importance de ce code de style.