performance sous IE

**DoubleU** · 12/09/2008, 09h56

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

**E.Bzz** · 12/09/2008, 09h59

Pas vu qu'il y avait une 2° page

Moi, le matin, avant 10H ...

**SpaceFrog** · 12/09/2008, 10h06

ça parait en effet curieux que d'instancier une nouvelle fonction puisse acceler les choses mais a priori le fonctionnement de javascript est ainsi ..
J'ai d'ailleurs proposé un script dans les contributions sur le sujet :
http://www.developpez.net/forums/d47...us-rapidement/

le temps gagné est plus que significatif !!!

**E.Bzz** · 12/09/2008, 10h14

En passant directement l'élément, ça éviterait des accès supplémentaires à la collection dans foo(), non ?

Code :

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

new foo(myForm.elements[ind]);

A+

**SpaceFrog** · 12/09/2008, 10h17

oui ... peut être encore plus rapide ???

**DoubleU** · 12/09/2008, 10h35

ça parait en effet curieux que d'instancier une nouvelle fonction puisse acceler les choses mais a priori le fonctionnement de javascript est ainsi ..
J'ai d'ailleurs proposé un script dans les contributions sur le sujet :
http://www.developpez.net/forums/d47...us-rapidement/

le temps gagné est plus que significatif !!!

Je sais pas par rapport a quoi le temps gagné est significatif (dans le post tu dis passer de 25s a 3.5), mais des tests que j'ai fait à partir de ta source, l'exécution d'une série instructions (celles contenues dans AddCells) en direct est plus rapide que si tu rajoutes ces instructions dans une fonction et que tu l'appelles normalement. L'appel via le new arrive en dernier...

**DoubleU** · 12/09/2008, 10h38

A la limite, dragonfly, si tu pouvais arriver a nous mettre le source généré, chacun pourrer tester ses propres solutions et on verrait qui est le plus efficace

**bigboomshakala** · 12/09/2008, 16h25

Envoyé par SpaceFrog

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** · 15/09/2008, 17h59

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** · 15/09/2008, 18h16

Envoyé par bigboomshakala

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

**bigboomshakala** · 16/09/2008, 09h38

oui c''est possible. il te suffit d'avoir un tableau référençant tes checkbox et de boucler dessus.

**le_chomeur** · 16/09/2008, 09h57

salut a tous ^^
j'ai suivis cette discution de loin, mais aillant été confronté aux différents problème de performance sous ie et FF lros du développement d'une appli j'ai BEAUCOUP chercher comment optimiser la chose

- Première chose essaye de travailler avec des objets, plutôt que de reparcourir ton dom à chaque fois =>

sur le load de ta page, ajoute une méthode sur tes inputs de type checkbox , qui te permettra d'ajouter la checkbox cochée dans un tableau global pour cela 2 solutions =>
-récupérer tous les inputs puis vérifier s'il s'agit de checkbox
-utiliser une classname pour les checkbox
et ajouter une méthode sur le onclick ( ou onchange me souvient plus a quel moment intervient le changement d'état :p )

avantage de la solution ? ne parcourir QUE le tableau de checkbox cochée d'où un gain de temps considérable.

ensuite en travaillant sur une collection tu auras également des temps d'accès plus rapide ( si si , vous pouvez faire des tests

)

Voila bon courage

**dragonfly** · 16/09/2008, 10h26

Salut le_chomeur,

Envoyé par le_chomeur

- Première chose essaye de travailler avec des objets, plutôt que de reparcourir ton dom à chaque fois =>

Je veut bien mais je vois pas comment faire avec un "simple" formulaire

Envoyé par le_chomeur

sur le load de ta page, ajoute une méthode sur tes inputs de type checkbox , qui te permettra d'ajouter la checkbox cochée dans un tableau global pour cela 2 solutions =>
-récupérer tous les inputs puis vérifier s'il s'agit de checkbox
-utiliser une classname pour les checkbox
et ajouter une méthode sur le onclick ( ou onchange me souvient plus a quel moment intervient le changement d'état :p )

avantage de la solution ? ne parcourir QUE le tableau de checkbox cochée d'où un gain de temps considérable.

Je ne voit pas pourquoi ajouter un classname on peut récupérer automatiquement tout les éléments partageant le même classname?

Le probléme que je ne veut pas que les checkbox cochés, je les veut tous (fonction cocher/décocher tout)

**DoubleU** · 16/09/2008, 10h31

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

Ouais attache le fichier qu'on voit ca ^^ Ca peut etre l'objet d'un concours assez rigolo

Envoyé par le_chomeur Voir le message

- Première chose essaye de travailler avec des objets, plutôt que de reparcourir ton dom à chaque fois =>

D'autant qu'il ne le parcourt qu'une seule fois, je vois mal comment tu peux faire moins ^^

**le_chomeur** · 16/09/2008, 10h57

effectivement ça pourrait être marrant ^^

voici un exemple de base pour la création et récupération et check
j'ai mis une vérification sur les temps d'éxécution et étonament sous ma config :
pc a 3ghz vista et 2go de ram , c'est firefox qui s'en sort le moins bien

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
	function $(IdElement){
		return document.getElementById(IdElement);
	}
 
	var TabCheckBox =new Array();
 
	function createInput(x){
		Debut = new Date();
		for(var i = 0; i < x ;i++)
		{
			var temp = new InstancieInput(i);
		}
		Fin = new Date(); 
		alert("CheckBox générées en  : " + (Fin-Debut)+ " ms");
	}
	function InstancieInput(x){
		var d = document;
 
		for(var i = 0; i < 100;i++){
			var NewInput =	d.createElement('input');
			NewInput.type = "checkbox";
			NewInput.name = x+"_"+i;
			//On ajoute l'item en tout premier
			document.body.appendChild(NewInput);
		}
 
	}
 
	//Cette méthode est géré exprès , j'aurais pus récupérer mes checkbox a leur création<br />
	// mais c'est pour me mettre dans le même contexte
	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");
	}
 
	function CheckAll()
	{
		Debut = new Date();
		for(var i = 0 , l = TabCheckBox.length ; i < l ; i++)
		{
			if(TabCheckBox[i].checked)
			TabCheckBox[i].checked = false;
			else{TabCheckBox[i].checked = true;}
		}
		Fin = new Date(); 
		alert("CheckBox checkées en  : " + (Fin-Debut)+ " ms");
	}
 
	function CheckAllByDom()
	{
		Debut = new Date();
 
		var ListeInput = document.getElementsByTagName("input");
		for(var i = 0 , l = ListeInput.length ; i < l ; i++){
			if(ListeInput[i].type=="checkbox" && ListeInput[i].checked)
			{
				ListeInput[i].checked = false;
			}
			else if(ListeInput[i].type=="checkbox" && !ListeInput[i].checked)
			{
				ListeInput[i].checked = true;
			}
		}
		Fin = new Date(); 
		alert("CheckBox checkées en  : " + (Fin-Debut)+ " ms");
	}
	//window.onload = createInput(2);
</script>
</head>
 
<body>
<input type="button" value="Check ALL" id="monBouton" onclick="CheckAll()" />
<input type="button" value="Check ALL by dom" id="monBouton2" onclick="CheckAllByDom()" />
<script type="text/javascript">
createInput(10);
getCheckBox();
</script>
</body>
</html>

on peut constater que la manipulation du dom est flagrante , même avec 1000 checkbox, je suis monter a 10000

**dragonfly** · 16/09/2008, 12h08

Re, le fichier joint est trop gros 1.43Mo pour un txt, et le forum me bloque à 64ko...

Mais je ne voit toujours pas comment optimiser mon code que j'ai mis plus haut.
Je pense que le probléme vient plus de IE7 que de ma machine, je ne voit rien dans mes options IE7 qui pourrait tout ralentir, alors que sous FF c'est en moins d'une seconde que tout se coche ou décoche...

EDIT : VIVE le .rar

**le_chomeur** · 16/09/2008, 13h49

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** · 16/09/2008, 14h12

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** · 16/09/2008, 14h27

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