différence de vitesse entre les expressions jQuery très similaires dans IE

Question

Dans IE, comparer la vitesse d'exécution d'une expression le long des lignes de

$('div.gallery div.product a"); 

aux très similaires

$('div.gallery').find("div.product").find("a"); 

Parfois, la deuxième séries de variantes plus rapide, parfois plus lent. Souvent, la différence de vitesse est un facteur de 2 ou plus. Que se passe-t-il?

Answer 1

La première variante fera ce qui suit:

1. Trouver tous les tags d'ancrage dans la page
2. laisser seulement ceux avec ancêtre div.product
3. laisser seulement ceux avec ancêtre div.gallery

Le deuxième

1. Trouver des éléments avec la classe .gallery et tag div
2. Recherche pour div.product dans leurs descendants
3. Rechercher les balises d'ancrage dans leurs descendants

Ainsi, le premier cherchera des éléments de droite à gauche, tandis que le le second les cherchera de gauche à droite.

Ce qui est plus rapide dépend de la structure de votre site, mais le premier est la manière recommandée , parce que les navigateurs correspondent sélecteur CSS de la même manière.

Si vous voulez augmenter la vitesse, assurez-vous que le sélecteur le plus à droite est aussi spécifique que possible.

par exemple: dans ce cas, vous pouvez ajouter une classe spéciale pour vos balises d'ancrage comme .gallery-link et votre requête deviendra simple a.gallery-link qui dans IE invoquera une fonction getElementsByTagName pour les balises d'ancrage alors ils seront filtrés par leur classe prénom. Notez que, puisque vous n'avez pas à parcourir l'arborescence DOM, votre requête devient beaucoup plus rapide. Le coût est un balisage un peu plus complexe. Pour les requêtes coûteuses, cela peut en valoir la peine.