Moyen le plus efficace pour trouver des éléments dans jQuery
Si j'ai une classe CSS qui je seulement jamais s'appliquer à des éléments de formulaire, par exemple:
<form class="myForm">
Laquelle de ces deux sélecteurs jQuery est le plus efficace et pourquoi?
a) $('form.myForm')
b) $('.myForm')
source d'informationauteur nickf
Vous devez vous connecter pour publier un commentaire.
Comme redsquare déjà mentionné, l'algorithme de sélection changé plus tard jQuery versions (en partie grâce à getElementsByClassName de soutien). En outre, j'ai testé avec la plus récente version jQuery à jour (v1.6), et a également ajouté un test pour le document.getElementsByClassName à des fins de comparaison (fonctionne au moins dans Firefox 4 et Chrome).
Les résultats dans Firefox 4:
Accepté la réponse est obsolète (et se trouve encore par la recherche de quelque chose comme "moyen efficace pour trouver des éléments de jquery") et peut induire les gens en erreur, alors j'ai senti que je dois écrire.
Aussi, jetez un oeil à la différence de temps entre jQuery et le navigateur natif du sélecteur de fonctions. En jQuery 1.2.6
$('.myForm')
a été plus que 300 fois plus lent quegetElementsByClassName
tout en jQuery 1.6, il a été seulement sur 20 fois plus lent, mais toujours plus rapide que$('form.myForm')
(contrairement à la réponse dépassée).Remarque: Les résultats ont été obtenus avec Firefox 4 (des résultats similaires avec Chrome). Dans Opera 10 interrogeant avec le nom de la balise est seulement légèrement plus rapide, mais l'Opéra prend également en charge beaucoup plus rapide natif
getElementsByClassName
.Code de Test: http://jsbin.com/ijeku5
J'ai juste écrit une rapide analyse comparative de test:
$('form.myForm')
10000 fois pris 1.367 lui s$('.myForm')
10000 fois pris 4.202 s (307%)$('form.myForm')
10000 fois pris 1.352 s$('.myForm')
10000 fois pris 1.443 s (106%)Il semble que la recherche pour les éléments d'un nom particulier est beaucoup plus rapide que la recherche de tous les éléments pour une classe particulière.
Edit: Voici mon programme de test: http://jsbin.com/ogece
Le programme démarre avec 100
<p>
balises et 4<form>
s, exploite les deux tests différents, supprime le<p>
balises et exécute le test de nouveau. Étrangement, lors de l'utilisation de cette technique, forme.myForm est plus lent. Regardez le code pour vous-même et faire ce que vous voulez.Le premier sélecteur devrait être plus rapide parce que jQuery pouvez utiliser la fonction intégrée "getElementsByTagName" pour réduire le nombre d'éléments qu'il a besoin de filtrer. La seconde a pour obtenir tous les éléments dans le DOM et vérifier leur classe.
Essayer slickspeed où vous pouvez voir la rudesse de la vitesse de sélecteurs à travers un multiple de js libs dont jquery.
forme.myForm de l'OMI est beaucoup plus rapide car il n'a besoin d'être regarder un sous-ensemble/ensemble filtré des éléments et n'aurait pas besoin d'itérer l'ensemble du document.
Le premier exemple va BEAUCOUP plus vite lorsqu'il est utilisé avec un contexte. Le deuxième exemple est plus rapide, mais pas par beaucoup. J'ai élargi votre exemple, à comparer avec un contexte:
http://jsbin.com/uluwe
enobrev, Intéressant.
J'ai juste couru votre exemple, mais à l'aide de jquery 1.3 beta 2 ici
résultats.... (1.2.6 vitesse entre parenthèses)
Allez les gars? Êtes-vous fou? La plupart des rapide de manière à sélectionner un élément est la voie la plus courte:
$('.myForm') est plus rapide que $('form.myform') parce que la deuxième variante as à faire suplementaire assurez-vous que l'élément est spécifié tagName. PEUT-être que la nouvelle jquery 1.3 va changer cette chose, mais sur la dernière version stable, est mauvais pour spécifier le nom de balise trop. Vous devriez lire ici.
Je pense que j'ai lu quelque part que MooTools est plus rapide de cette façon. Bien.. Peut-être dans le Moo, je ne sais pas, mais en jQuery c'est le moyen le plus rapide.
prendre un coup d'oeil à cette profiler:
(big pic)
première est seulement avec l'ID, la seconde est de la forme#ID (testé sur ma page de blog) et fonctionnent exactement de même pour le sélecteur de classe.