performance sous IE

Version imprimable

Voir 40 message(s) de cette discussion en une page

performance sous IE

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:

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

10/09/2008, 14h01
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")
11/09/2008, 14h19
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

Code:

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

:idea: ???

11/09/2008, 14h33
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.

Citation:

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

pas si falgrant que ça ...

Code:

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 !

11/09/2008, 14h56
dragonfly

Avec ou sans mon expression ...match... j'ai le même temps d'éxecution, donc je pencherai plus pour un soucis au niveau d'un bout de code qu'IE n'aime pas

Edit: Faut faire le test plutot sur la durée moyenne pour faire l'opération, pas sur la durée totale pour toutes les faire.
J'ai rajouté le test avec == vs match, c'est encore plus flagrant la.

Code:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<html>
<body>
<div id="foo"></div>
 
<script type='text/javascript'>
 
var test
var x1 = Math.random();
var x2 = Math.random();
 
var d = document.getElementById("foo");
 
var nb = 80000;
var t1 = 0, t2 = 0, t3 = 0, t4 = 0;
 
for (var i=0;i<nb;i++){
 
	var start1 = new Date();
   	test       = (x1>x2) ? x1 : x2;
	var stop1  = new Date();
 
	var start2 = new Date();
   	if(x1>x2){test = x1;}
   	else{     test = x2;}
   	var stop2 = new Date();
 
   	var start3 = new Date();
   	d.id == "foo";
   	var stop3 = new Date();
 
   	var start4 = new Date();
   	d.id.match("foo");
   	var stop4 = new Date();
 
   	t1 += (stop1 - start1);
   	t2 += (stop2 - start2);   	
   	t3 += (stop3 - start3);
   	t4 += (stop4 - start4);
 
}
 
 
alert ("temps moyen pour faire une opération:\n - opérateur ternaire: "+ t1/nb+"\n - if/else: "+t2/nb)
alert ("temps moyen pour faire le test sur le nom:\n - ==: "+ t3/nb+"\n - match: "+t4/nb)
</script>
 
</body>
 
</html>

11/09/2008, 15h41
SpaceFrog

lol donc une durée individuelle moyenne plus courte mais une durée totale plus longue ???

au final je préfère prendre le plus lent, il est plus rapide :aie::aie:
11/09/2008, 15h59
DoubleU

Ben pas vraiment.

Si t'additionnes toutes les durées unitaires, la moindre durée un peu trop longue (parce que le proc est occupé a autre chose à ce moment la par exemple) peut completement te ruiner ton analyse.

Tandis qu'en faisant la moyenne de toutes ces durées, les erreurs sont lissées sur la quantité de tests.

Apres sur 400 opérations, pas sur que la différence soit flagrante :mouarf:
11/09/2008, 16h03
SpaceFrog

testé sur 1 500 000 et if else a perdu !
11/09/2008, 16h05
Bovino

Citation:

Envoyé par SpaceFrog

testé sur 1 500 000 et if else a perdu !

Normal, il est plus rapide !!! :mouarf3:
Bon, d'accord, je sors
11/09/2008, 16h43
DoubleU

Citation:

testé sur 1 500 000 et if else a perdu !

Sauf que si tu fais ton test 10x, t'auras 5x plus rapide, 5x plus lent. Tu ne peux pas te juger sur la somme des durées pour juger du plus efficace...
11/09/2008, 16h46
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 ...
11/09/2008, 17h46
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

Code:

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;
					}	
}
}

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:

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;
					}	
}
}

12/09/2008, 09h44
DoubleU

Citation:

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
12/09/2008, 09h51
E.Bzz

Citation:

Envoyé par dragonfly

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:

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

permet une comparaison directe ...

A+
12/09/2008, 09h53
SpaceFrog

personne ne veux de mes instanciations de fonctions ?

Voir 40 message(s) de cette discussion en une page