Discussion :

[dragonfly]

Bonjour à tous,

Je m'adresse à vous suite à un gros probléme de performance sous IE

En effet j'ai créé un bouton qui coche/décoche à peu prés 400 cases à cocher (au plus gros), sous IE, lorsque j'appuie sur ce bouton tout les boutons se coche en 2minutes alors que sous FF cela met 2 secondes.

Voici ma fonction javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
function top_cocher(formu){
  //alert(formu);
	var myForm = document.getElementById(formu);
	// On parcours le formulaire et on coche ou dÚcoche tout en fonction de la valeur de "type" et de "name" (spécifique au case à cocher)
	for (var ind = 0; ind < myForm.elements.length; ind += 1)	
		{
			if ( (myForm.elements[ind].type == "checkbox") && (myForm.elements[ind].name.match("chp:Topaction")) )
			{
				if (type=='C')
					{
						myForm.elements[ind].checked = true;
					}	
				else
					{
						myForm.elements[ind].checked = false;
					}	
			}
		}	
	// AprÚs que l'on a tout modifier, on change la valeur de type pour que le tout fonctionne correctement
	if(type=='C'){
    type="D";
  }else{
    type="C";
  }
}

Et le truc c'est que l'application doit fonctionner nickel sous IE.

Autre poitn qui doit avoir son importance, j'ai sur cette page a peu prés 400*10 input caché qui sont dans ce formulaire (je suppose que le parcours de tous pour voir leurs prop est long mais la différence de perf est flagrante quand même)

Merci d'avance pour vos conseils et aides

[DoubleU]

myForm.elements.length << met ca en cache dans une variable
myForm.elements[ind].name.match("chp:Topaction") << esaie de stocker cette info dans l'id par exemple, pour faier un if( tonElement.id == "tonText")

[dragonfly]

Pour le length dans la variable ca change rien, et je ne comprends pas comment ta deuxiéme prop. pourrati up les perfs.


Merci pour ta réponse


EDIT : Aprés essai de tes conseils, j'arrive à un temps de 70 sec au mieux, c'est toujours pas ca...

Je pense que le code n'est peut être pas approprié à IE et du coup il foire, aprés je peut me tromper

[SpaceFrog]

Code :

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

1
2
3
if ( (myForm.elements[ind].type == "checkbox") && (myForm.elements[ind].name.match("chp:Topaction")) )
			{ myForm.elements[ind].checked = (type=='C')?true:false;
			}

???

[DoubleU]

Bah la différence c'est que le temps d'exécuter un == est infiniment moins long que celui de faire un match sur une exécution régulière

Spaffy, l'opérateur ternaire est plus lent que le if/else.

[SpaceFrog]

Spaffy, l'opérateur ternaire est plus lent que le if/else.

pas si falgrant que ça ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type='text/javascript'>
var test
var condition=false
var start1=new Date()
for (i=0;i<150000;i++){
   test=(condition)?test+1:test+1;
   }
var stop1=new Date()
var Elapsed1= stop1-start1
 
 
var start2=new Date()
for (i=0;i<150000;i++){
   if(condition){test+1;}
   else{test=test+1}
   }
stop2=new Date()
var Elapsed2= stop2-start2
 
 
 
alert (Elapsed1+"..."+Elapsed2)
</script>

en testant 1 500 000 occurrences, c'est même le premier qui prend l'avantage !

[bigboomshakala]

Code :

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

myForm.elements[ind].checked = (type=='C')?true:false;

???

if/else ou op ternaire... moi je dis le plus rapide c'est de supprimer les 2... -_-'

Code :

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

myForm.elements[ind].checked = (type=='C');

dragonfly > es-tu sûr que le lag vienne de cette fonction ? tu as placé un timer pour voir où exactement tu perds ton temps ?

edit : ah tiens yavé une deuxième page

[dragonfly]

Me revoila, j'ai testé un nouveau code qui lme permet de gagner quelques secondes (vers 60 sec).

Le probléme est que je traite 12037 input au lieu de 600, je voudrais donc pouvoir ne prendre que les input de type checkbox et boucler uniquement dessus.

Voici mon code actuel :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function top_cocher(formu){
	var myForm = document.getElementById(formu);
 
	var tables=myForm.getElementsByTagName('input');
	alert(tables.length);
 
  for (var ind = 0; ind < tables.length; ind ++){
	if ( (tables[ind].type == "checkbox") && (tables[ind].id.match("chp:Topaction")) ){
    tables[ind].checked = (type=='C')?true:false;  
    }
  }
  	if(type=='C'){
    type="D";
  }else{
    type="C";
  }
}

.

Aprés lecture, je vais tester tes solutions SpaceFrog

Merci pour vos réponses.

P.S : Le fichier généré et vraiment grand, vous le voulez vraiment ? ^^

EDIT : Spacefrog ta solution me donne un temps de 120 secondes a peu prés dsl

[dragonfly]

dragonfly > es-tu sûr que le lag vienne de cette fonction ? tu as placé un timer pour voir où exactement tu perds ton temps ?

edit : ah tiens yavé une deuxième page

Je fais un test en mettant simplement ca

Code :

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

1
2
 
tables[ind].checked = true;

Et le temps est le même.

J'ai testé avec 200 checkbox au lieu de 600, le temps tombe à 6s (avec a peu prés 4000 inputs dans la boucle).
Donc je voudrais trouver une fonction me permettant de faire le tri et de ne prendre que les "checkbox" et ne boucler qu'avec eux (600 inputs sans les autres non checkbox)

MERCI

[SpaceFrog]

Tu parles en efficacité absolue ...

C'est comme si tu avait une voiture de course qui était plus rapide mais seulement dans les virages, le hic c'est que l'utilisatuer juge sur la ligne d'arrivée ...

[dragonfly]

Merci pour vos réponses

La question de savoir qui du match ou du "==" marche le mieux ne se pose pas dans mon cas car les inputs s'appellent "chp:TopactionXXX", ou XXX est un nombre incrementé à chaque occurence de case à cocher donc obligé de passer par le match...

Aprés pour le if ou l'autre test en cours... et j'ai du gagner 1-2 secondes.

Toujours à +/- 70 secondes donc

[SpaceFrog]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function top_cocher(formu){
  //alert(formu);
	var myForm = document.getElementById(formu);
	// On parcours le formulaire et on coche ou dÚcoche tout en fonction de la valeur de "type" et de "name" (spécifique au case à cocher)
	for (var ind = 0; ind < myForm.elements.length; ind += 1)	
		{
		new foo(ind)	
 
		}	
	// AprÚs que l'on a tout modifier, on change la valeur de type pour que le tout fonctionne correctement
	if(type=='C'){
    type="D";
  }else{
    type="C";
  }
}
 
 
function foo(bar){
if ( (myForm.elements[ind].type == "checkbox") && (myForm.elements[bar].name.match("chp:Topaction")) )
			{
				if (type=='C')
					{
						myForm.elements[bar].checked = true;
					}	
				else
					{
						myForm.elements[bar].checked = false;
					}	
}
}

[SpaceFrog]

essaye de faire une fonction séparée de la boucle qui coince et appelle en une nouvelle instance à chaque occurence, ça devrait accélérer un peu ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function top_cocher(formu){
  //alert(formu);
	var myForm = document.getElementById(formu);
	// On parcours le formulaire et on coche ou dÚcoche tout en fonction de la valeur de "type" et de "name" (spécifique au case à cocher)
	for (var ind = 0; ind < myForm.elements.length; ind += 1)	
		{
		new foo(ind)	
 
		}	
	// AprÚs que l'on a tout modifier, on change la valeur de type pour que le tout fonctionne correctement
	if(type=='C'){
    type="D";
  }else{
    type="C";
  }
}
 
 
function foo(bar){
if ( (myForm.elements[ind].type == "checkbox") && (myForm.elements[bar].name.match("chp:Topaction")) )
			{
				if (type=='C')
					{
						myForm.elements[bar].checked = true;
					}	
				else
					{
						myForm.elements[bar].checked = false;
					}	
}
}

[DoubleU]

La question de savoir qui du match ou du "==" marche le mieux ne se pose pas dans mon cas car les inputs s'appellent "chp:TopactionXXX", ou XXX est un nombre incrementé à chaque occurence de case à cocher donc obligé de passer par le match...

Pourtant si, parce que c'est quelque chose qui te fait perdre beaucoup de temps.
Essaie de mettre un classname (s'ils n'en ont pas déja) à tous tes checkbox et fait le test sur le className et non plus sur l'id comme j'avais proposé.

Par ailleurs, t'as essayé de parcourir différemment tes chekbox? via un getElementsByTagName

[E.Bzz]

les inputs s'appellent "chp:TopactionXXX", ou XXX est un nombre incrementé à chaque occurence de case à cocher donc obligé de passer par le match...

Pas obligé, non

Code :

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

myForm.elements[ind].name.substr(0, 13) == "chp:Topaction"

permet une comparaison directe ...

A+

[SpaceFrog]

personne ne veux de mes instanciations de fonctions ?

[DoubleU]

Instancier une fonction a chaque tour de boucle est censé aller plus vite que faire 2 if en direct ?

[le_chomeur]

as tu essayé ma méthode ? en stockant tes objet dans un tableau ?
la courbe de performance est exponentiel . . .
plus tu as d'élément plus tu gagnes en perf, c'est quasi instantané sur IE6/7 FF3 . . .

[dragonfly]

Re, mon code est le suivant

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function top_cocher(formu){
	var myForm = document.getElementById(formu);
 
	var tables=myForm.getElementsByTagName('input');
	alert(tables.length);
 
  for (var ind = 0; ind < tables.length; ind ++){
	if ( (tables[ind].type == "checkbox") && (tables[ind].id.match("chp:Topaction")) ){
    tables[ind].checked = (type=='C')?true:false;  
    }
  }
  	if(type=='C'){
    type="D";
  }else{
    type="C";
  }
}

Donc oui mes inputs sont dans un tableau mais ca ne m'as fait gagner "que" 10-15 secondes sur 70

[le_chomeur]

je viens de tester avec ma méthode . . .
je passe de 200 ms ( a peu près ) avec ta méthode a 15ms sous firefox !
sous IE7 de 500ms a 8ms !! résultat identique pour IE6 . . .

il te faut 2 méthodes, l'une initialisant ton tableau soit au load de ta page, sois tout en bas ( ça revient au même mais dans le deuxieme cas, tu ne bloque pas ton window.onload ) :

au tout début de ta page cette méthode :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
//Tableau global : 
 var TabCheckBox =new Array();
 
//Méthode de remplissage
function getCheckBox()
	{
		var ListeInput = document.getElementsByTagName("input");
		for(var i = 0 , l = ListeInput.length ; i < l ; i++){
			if(ListeInput[i].type=="checkbox")
			{
				TabCheckBox.push(ListeInput[i]);
			}
		}
		alert("il y a : " + TabCheckBox.length + " CheckBox");
	}

puis tout en bas après tous les autres éléments :

Code :

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

1
2
3
4
 
      <script type="text/javascript">
	  		getCheckBox();
	  </script>

puis ta méthode :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function top_cocher(){
  for(var ind = 0 , l = TabCheckBox.length ; ind < l ; ind++)
		{
	if ( (TabCheckBox[ind].type == "checkbox") && (TabCheckBox[ind].id.match("chp:Topaction")) ){
    TabCheckBox[ind].checked = (type=='C')?true:false;  
    }
  }
  	if(type=='C'){
    type="D";
  }else{
    type="C";
  }
}

ps : j'ai adapté ta fonction , car de mon coté je n'ai pas la variable type == C a tester mais cela impacte peu les perfs

bon courage