11524 sujets

JavaScript, DOM et API Web HTML5

Manipulation de classes CSS : RegExp ou array.split() ?

J'ai toujours eu l'habitude de faire mes fonctions de manipulation de classes CSS (tester, ajouter, supprimer, remplacer) avec array.split(), mais hier je suis tombé sur le script de Julien Royer qui fait la même chose avec des RegExp.

J'ai toujours pensé que les RegExp étaient lourdes en ressources et donc je les évite autant que possible.

J'ai donc créé une petite page de test pour voir qu'elle est la solution la plus adpatée entre nos deux approches, en créeant une page contenant 500 <div>, chacun ayant entre 1 et 5 classes, choisies au hasard.

Voic la page de test en question

La première ligne de bouton utilise les fonctions de Julien (celles-ci) alors que la seconde utilise mes fonctions (celles-ci)

Une fois un bouton cliqué, le temps d'execution apparait sur le bouton en question (en ms)

J'ai fait quelques tests, sous Firefox 2.0, IE6 et IE7 (WinXp) pour chacune des méthodes et ait fait une moyenne sur 5 essais.

Les résultats sont pas extremement concluants (d'un autre coté, mes tests sont pas extremement poussés non plus)
Pour simplifier, les deux méthodes se valent sous IE7.
Sous IE6, la mienne est légérement plus rapide pour addClass et removeClass, mais un brin plus lente pour replaceClass
Par contre sous Firefox, addClass est deux fois plus rapide avec la méthode de Julien, alors que ses méthodes removeClass et replaceClass sont un peu plus lentes.

Au final donc, rien de vraiment extraordinaire qui mériterait de préferer une méthode à une autre.

Si jamais vous avez des compléments d'infos, j'suis preneur.
Modifié par Tymlis (29 Aug 2007 - 09:52)
Bonjour.

J'avais fait des "tests" rapides pour faire la différence split vs regexp mais il n'y en a pas réellement en Javascript puisque de toute façon split c'est une regexp du navigateur ...
Hello,

Je pense qu'il y a un problème dans ton test Tymlis, j'ai l'impression que tu n'utilises que les fonctions avec RegExp. Smiley cligne 
document.getElementById("test1").onclick = test1;
document.getElementById("test2").onclick = test2;
document.getElementById("test3").onclick = test3;
document.getElementById("test4").onclick = test4;

document.getElementById("test1bis").onclick = test1;
document.getElementById("test2bis").onclick = test2;
document.getElementById("test3bis").onclick = test3;
document.getElementById("test4bis").onclick = test4;

D'ailleurs, tu utilises dans tes fonctions les méthodes find (sur un Array) et setClass (sur un élément de l'arbre DOM). D'où viennent-elles ?
CNeo a écrit :
J'avais fait des "tests" rapides pour faire la différence split vs regexp mais il n'y en a pas réellement en Javascript puisque de toute façon split c'est une regexp du navigateur ...

Je pense que c'est un peu plus compliqué que ça. Les navigateurs peuvent tout à fait optimiser leur code si le paramètre de split est une chaîne de caractères et non une RegExp.
Modifié par Julien Royer (29 Aug 2007 - 10:31)
Julien Royer a écrit :
Hello,

Je pense qu'il y a un problème dans ton test Tymlis, j'ai l'impression que tu n'utilises que les fonctions avec RegExp. Smiley cligne


Hahahahaha ! Ah ben ça c'est la meilleure, tu m'étonnes que mes tests soient pas concluants ^^
Bon, je vérifie que je me sois pas trompé de fichier quand même Smiley langue

Hmm pour les deux méthodes dont tu parles, j'avais oublié qu'elles n'étaient pas définies par défaut, les voila :



Array.prototype.find = function(search) {
	var k = this.length;
	while (k--) if (this[k]===search) return true;
	k = null;
	return false;
}


et 

Element.prototype.setClass = function(element, className) {
		element.className = className;
		return element;
	}

Element étant un objet fait-maison qui extend les objets du DOM (à la jquery et autre)


Edit : J'ai corrigé mes fonctions sur la page et dans le topic des scripts utiles.
Faudra que je refasse mes tests avec les bonnes fonctions attribuées (c'est corrigé), parce qu'effectivement là mes résultats sont un peu débiles Smiley lol
Enfin bon, voila le lien corrigé
Modifié par Tymlis (29 Aug 2007 - 11:09)
Tymlis a écrit :
Faudra que je refasse mes tests avec les bonnes fonctions attribuées

Si tu as la motivation de le faire, ça m'intéresse. Smiley ravi

Une petite question par rapport à ton code : pourquoi effaces-tu systématiquement le contenu de tes variables locales à la fin de tes fonctions ?
Julien Royer a écrit :

Si tu as la motivation de le faire, ça m'intéresse. Smiley ravi

Je pars en vacances à la fin de la semaine, mais si j'ai le temps d'ici là, je le ferai Smiley smile

a écrit :
Une petite question par rapport à ton code : pourquoi effaces-tu systématiquement le contenu de tes variables locales à la fin de tes fonctions ?

Le garbage collector d'IE6 étant bien loin d'être parfait et ayant souvent des problèmes pour désallouer la mémoire utilisée par des fonctions/objets imbriquées/liés les uns au autres, je prefere vider explicitement la mémoire autant que possible quand je n'ai plus besoin d'une variable.


Bien sur en soit ça n'empeche pas les memory leak d'IE6 (cf. cet article), mais ça réduit leur importance (enfin, j'espere)
Modifié par Tymlis (29 Aug 2007 - 14:17)
Tymlis a écrit :
Le garbage collector d'IE6 étant bien loin d'être parfait et ayant souvent des problèmes pour désallouer la mémoire utilisée par des fonctions/objets imbriquées/liés les uns au autres, je prefere vider explicitement la mémoire autant que possible quand je n'ai plus besoin d'une variable.

En effet, mais je pense qu'il vaut mieux se limiter aux cas où il y a réellement un risque de memory leak, sinon le code devient lourd.
Voui, mais je préfère prendre mes précautions dès le début plutot que d'avoir à remonter dans tout le lot de fonctions pour trouver celle qui cause problème.

C'est devenu une habitude, comme toujours faire suivre un float:left par un display:inline en CSS pour éviter encore un soucis avec IE6. Ca pose pas de problème et corrige de potentiels bugs
Sujet clos
Aller à