Selector : ID vs Class

Bonjour,

Avec Jquery, il faut utiliser le sélecteur id en premier si possible. Dans certains cas, cela me pose question.

Soit :

Code:

---

1 2 3 4

<div id="a" class="window"></div> <div id="b" class="window"></div> <div id="c" class="window"></div>

---

Parmi les écritures ci-dessous, laquelle est meilleur ? Sont-elles équivalentes ?

Code:

---

1 2	$("div.window").draggable({ ... })

---

ou

Code:

---

1 2 3 4

$("div#a").draggable({ ... }); $("div#b").draggable({ ... }); $("div#c").draggable({ ... });

---

ou

Code:

---

1 2	$("div#a,div#b,div#c").draggable({ ... })

---

D'autre part, comment le démontrer ?
En général, avez-vous des astuces ou outils pour mesurer ce genre chose ?

Code:

---

$("#a,#b,#c").draggable({ ... })

---

un id étant unique, inutile de lui demander de les trouver parmi les divs ...

ok merci

Code:

---

1 2	$("div.window").draggable({ ... })

---

vs

Code:

---

1 2 3 4

$("#a").draggable({ ... }); $("#b").draggable({ ... }); $("#c").draggable({ ... });

---

vs

Code:

---

1 2	$("#a,#b,#c").draggable({ ... })

---

Comme précisé par Spaffy, préciser que tu cherches une div n'a pas grand intérêt, pour les id car ils doivent être uniques, pour les classes parce que si ta page est bien structurée, il ne devrait pas être nécessaire de le préciser.
D'autre part, la syntaxe du sélecteur a une grande importance car elle va impacter la méthode de recherche en interne.

Code:

---

$('#un_id')

---

va utiliser la méthode getElementById() qui sera certainement la plus rapide dans tous les cas.

Code:

---

$('.une_classe')

---

va utiliser getElementsByClassName() puis faire une boucle sur tous les éléments récupérés.
Si tu ajoutes div devant, il me semble que cela va forcer à utiliser querySelectorAll() (si possible) + une boucle voire des méthodes plus rustiques, ce sera donc probablement moins performant.
Bref, si tu connais au départ le nombre d'éléments, il vaut mieux passer par

Code:

---

1 2 3

$("#a").draggable({ ... }); $("#b").draggable({ ... }); $("#c").draggable({ ... });

---

puisque tu utilises la méthode la plus performante et que tu t'évites une boucle.
Ceci dit, sur des pages pas trop lourdes, la différence de perfs devrait être assez peu significative et

Code:

---

$(".window").draggable({ ... })

---

permettra une syntaxe plus concise.

Pour les tests, regardes du côté de jsPerf: JavaScript performance playground ;)

Logiquement le dernier ...

dans le premier tu parses les div puis tu en extrait la classe window

dans le second tu appelles trois fois le draggable

dans le dernier la fonction est appelée une seul fois


Pour le tester il suffirait de benchmarker une attribution de ton draggable dans une boucle de 1000 itérations pour chaque cas.
Je suis quasi certain que le dernier sort vainqueur

Merci pour vos réponse,

Citation:

---

Pour les tests, regardes du côté de jsPerf: JavaScript performance playground

---

J'ai créer un jsPerf du coup ( avec la fonction .html() plutôt que .draggable() ): http://jsperf.com/id-vs-class-selector

SpaceFrog

Citation:

---

Pour le tester il suffirait de benchmarker une attribution de ton draggable dans une boucle de 1000 itérations pour chaque cas.
Je suis quasi certain que le dernier sort vainqueur

---

le résultat est surprenant, sous chrome pour moi :

Code:

---

1 2 3 4

$("#a").html("test"); $("#b").html("test"); $("#c").html("test");

---

est plus rapide que :
$("#a,#b,#c").draggable({ ... })

Code:

---

1 2	$("#a,#b,#c").html("test");

---

Ce qui me surprend le plus, c'est qu'avec $(".window").html("Test");, c'est cette méthode la plus rapide... :?

oui efectivement, $(".window").html("Test"); est plus rapide, mais $("div.window").html("Test") est plus lent...

ce qui est normal puisqu'il fait un premier tri sur les div et en extrait les classes.

par contre que la selection de classe soit plus rapide que le selection id est un peu surprenant.



Sinon

Code:

---

1 2 3 4

$("#a").html("test"); $("#b").html("test"); $("#c").html("test");

---

vs

Code:

---

$("#a,#b,#c").draggable({ ... })

---

8O8O8O

Heu il faut comparer ce qui est comparable !!!

Citation:

---

Heu il faut comparer ce qui est comparable !!!

---

oui je suis d'accord .Html() est différent de .draggable()
je voulais dire $("#a,#b,#c").Html("Test");

Spaffy, dans le test, c'est bien $("#a,#b,#c").html('Test') qui est utilisé ;)