Je suis juste en train d'apprendre jQuery et j'ai été incapable de trouver quelqu'un de spécifiquement répondre à cette question. Pour les performances, serait-il préférable de sélectionner $ ('# element') ou $ ('div # element')? Est-ce que cela fait une différence?jQuery Selector Spécificité
Répondre
Il est recommandé de ne pas placer le nom du tag avant un ID.
Les recherches d'ID utilisent le getElementById()
natif et sont extrêmement rapides, donc toute comparaison supplémentaire non requise ralentira simplement le sélecteur. En général, utilisez $('#myID')
au lieu de $('div#myID')
.
La différence de performance est minime, mais c'est le cas pour de nombreuses bonnes pratiques.
Probablement la seule fois où cela peut être nécessaire serait lorsque vous utilisez le même fichier javascript pour 2 pages différentes où le même ID est utilisé dans les deux pages, mais sur différents types de balises. Ensuite, vous auriez besoin du spécificateur.
Si c'est le cas, vous feriez mieux d'ajuster vos identifiants.
Juste curieux si vous connaissez un test qui pourrait le prouver? – mysmallidea
Oui, cela peut faire la différence. Comme dans css, essayez de garder les choses aussi spécifiques que possible.
Les différences sont probablement minimes, mais en cas de doute, profil dans Firebug.
Je vous prendrai rapidement une référence.
Modifier
Je ne peux pas trouver une référence rapide des tests de vitesse, mais cela est probablement l'une de ces optimisations prématurées qui ne vaut pas se soucier, en particulier en utilisant ID. Je pense que le moteur de Sizzle est assez bon pour le trier.
Cela peut être plus problématique dans les sélecteurs plus complexes impliquant des étiquettes et des classes. Encore une fois, le profil!
Edit # 2
je aurais dû regarder les docs! oui, cela fait une différence - une recherche supplémentaire est nécessaire.
http://api.jquery.com/id-selector/#id
Et leur grande citation:
Comme toujours, rappelez-vous qu'en tant que développeur , votre temps est généralement la ressource la plus précieuse. Ne pas mettre au point sur l'optimisation de la vitesse du sélecteur à moins qu'il ne soit clair que les performances doivent être améliorées.
Je suppose que je vous ai mal compris. Alors oui, ne soyez pas inutile. – jAndy
@jAndy - Cela fait toute la différence. Pas beaucoup de différence, mais oui, c'est là. – user113716
Si vous assumez ceci:
<span id="element"></span>
<div id="element"></div>
$("#element")
sélectionnera les deux, alors que $("div#element")
ne recevra que la div, il est plus spécifique.
Les ID doivent être uniques. (bien que cela fonctionne, ce n'est pas une bonne pratique) – ScottE
@ScottE - En fait, il échouerait probablement dans IE. Je crois que IE retournera toujours le premier '# élément 'qu'il trouve, indépendamment de l'inclusion du nom de balise dans le sélecteur. – user113716
N'a pas été au courant de cela, merci. Pas que je fasse ça ... – ScottE
Utilisez simplement #id.
Vous pouvez tester ceci grossièrement en utilisant la console firebug.
Les résultats sont catégoriques.
nodeName # nodeId = 0.703ms (14 méthode appelle)
#nodeId = 0.095ms (4 appels de méthode)
alt text http://gyazo.com/6c4cf4baf934ed71818cb89ac7f36246.png
- 1. jQuery selector
- 2. jQuery Selector
- 3. jQuery Selector
- 4. Jquery Selector
- 5. jquery selector
- 6. jQuery selector samba
- 7. jQuery Advance Selector
- 8. Problème avec jquery selector
- 9. jQuery xPath selector, &&
- 10. jQuery suivant (ish) selector
- 11. JQuery Sous Selector question
- 12. jQuery advanced selector
- 13. jQuery CSS 'ou' selector
- 14. aide jquery selector
- 15. jQuery selector avec variable
- 16. Aide jQuery child selector
- 17. jQuery startswith selector
- 18. jQuery Zebra selector
- 19. Simplifier jQuery Selector
- 20. jQuery selector "memory"
- 21. jquery selector last-last
- 22. Need jquery selector
- 23. Jquery Selector Question..Date Picker
- 24. pauses de rembourrage jQuery selector?
- 25. jQuery hover et class selector
- 26. jQuery et Prototype Selector Madness
- 27. Test en direct jQuery selector
- 28. Modifier la spécificité par enfant
- 29. CSS question - Spécificité et interactivité
- 30. Equivalence Selector
Votre question est destinée à demander si elle fait une différence dans la fonctionnalité, ou une différence de vitesse? –
OP a déclaré la performance. – ScottE