Bons moyens d'améliorer les performances des sélecteurs jQuery ?

Question

Je cherche tout moyen d'améliorer les performances du sélecteur d'un appel jQuery. Plus précisément, des choses comme celles-ci :

Est $("div.myclass") plus vite que $(".myclass")

Je pense que c'est possible, mais je ne sais pas si jQuery est assez intelligent pour limiter la recherche par le nom de la balise en premier, etc. Quelqu'un a-t-il une idée sur la façon de formuler une chaîne de sélection jQuery pour obtenir les meilleures performances ?

Answer 1

Il n'y a aucun doute que filtrer d'abord par nom de tag est beaucoup plus rapide que de filtrer par nom de classe.

Ce sera le cas jusqu'à ce que tous les navigateurs implémentent nativement getElementsByClassName, comme c'est le cas pour getElementsByTagName.

Answer 2

Dans certains cas, vous pouvez accélérer une requête en limitant son contexte. Si vous avez une référence d'élément, vous pouvez la passer comme deuxième argument pour limiter la portée de la requête :

$(".myclass", a_DOM_element);

devrait être plus rapide que

$(".myclass");

si vous avez déjà un élément_DOM_ et qu'il est nettement plus petit que le document entier.

Answer 3

Pour bien comprendre ce qui est plus rapide, vous devez comprendre le fonctionnement de l'analyseur CSS.

Le sélecteur que vous transmettez est divisé en parties reconnaissables à l'aide de RegExp, puis traité morceau par morceau.

Certains sélecteurs, comme ID et TagName, utilisent la mise en œuvre native du navigateur, qui est plus rapide. D'autres, comme les classes et les attributs, sont programmés séparément et sont donc beaucoup plus lents, car ils nécessitent de parcourir en boucle les éléments sélectionnés et de vérifier chaque nom de classe.

Donc oui, pour répondre à votre question :

$('tag.class') est plus rapide que juste $('.class'). Pourquoi ? Dans le premier cas, jQuery utilise l'implémentation native du navigateur pour filtrer la sélection jusqu'aux éléments dont vous avez besoin. Ce n'est qu'ensuite qu'il lance l'implémentation .class, plus lente, pour filtrer ce que vous avez demandé.

Dans le second cas, jQuery utilise sa méthode pour filtrer chaque élément en fonction de la classe de saisie.

Cela va bien au-delà de jQuery, car toutes les bibliothèques javascript sont basées sur ce principe. La seule autre option est l'utilisation de xPath, mais elle n'est actuellement pas très bien supportée par tous les navigateurs.

Answer 4

Comme Reid l'a dit plus haut, jQuery travaille de bas en haut. Bien que

c'est-à-dire $('#foo bar div') est beaucoup plus lent que $('bar div #foo')

Ce n'est pas la question. Si vous aviez #foo vous ne mettriez rien avant dans le sélecteur de toute façon puisque les ID doivent être uniques.

Le fait est que :

• si vous sous-sélectionnez quoi que ce soit à partir d'un élément avec un ID, sélectionnez d'abord ce dernier puis utilisez .find , .children etc : $('#foo').find('div')
• la partie la plus à gauche (première) du sélecteur peut être moins efficace en passant à l'échelle de la partie la plus à droite (la dernière) qui devrait être le plus efficace - c'est-à-dire que si vous n'avez pas de carte d'identité, assurez-vous de rechercher $('div.common[slow*=Search] input.rare') plutôt que $('div.rare input.common[name*=slowSearch]') - comme cela n'est pas toujours applicable, assurez-vous de forcer l'ordre des sélecteurs en les divisant en conséquence.

Answer 5

Voici comment améliorer les performances de vos sélecteurs jQuery :

• Sélectionnez par #id chaque fois que possible ( résultats des tests de performance ~250 plus rapide)
• Spécifiez la portée de vos sélections ( $('.select', this) )