performance sous IE

**dragonfly** · 10/09/2008, 12h25

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** · 10/09/2008, 14h01

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** · 11/09/2008, 14h19

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** · 11/09/2008, 14h23

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

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** · 11/09/2008, 14h47

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 !

**dragonfly** · 11/09/2008, 14h56

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

**DoubleU** · 11/09/2008, 15h12

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 :

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

**SpaceFrog** · 11/09/2008, 15h41

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

**DoubleU** · 11/09/2008, 15h59

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

**SpaceFrog** · 11/09/2008, 16h03

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

**Bovino** · 11/09/2008, 16h05

Envoyé par SpaceFrog

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

Normal, il est plus rapide !!!

Bon, d'accord, je sors

**DoubleU** · 11/09/2008, 16h43

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...

**SpaceFrog** · 11/09/2008, 16h46

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** · 11/09/2008, 17h46

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** · 11/09/2008, 20h42

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** · 11/09/2008, 20h44

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** · 12/09/2008, 09h44

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** · 12/09/2008, 09h51

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 :

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

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

permet une comparaison directe ...

A+

**SpaceFrog** · 12/09/2008, 09h53

personne ne veux de mes instanciations de fonctions ?

performance sous IE

JavaScript

Discussions similaires

Partager

Partager