Discussion :

[dkmix]

Bonjour,

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

Soit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$("div#a").draggable({ ... });
$("div#b").draggable({ ... });
$("div#c").draggable({ ... });

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[dkmix]

ok merci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

vs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$("#a").draggable({ ... });
$("#b").draggable({ ... });
$("#c").draggable({ ... });

vs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

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

[dkmix]

Merci pour vos réponse,

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Bovino]

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

[Bovino]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#un_id')

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

permettra une syntaxe plus concise.

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