Optimisation de boucle JS

**bandoine** · 01/09/2009, 10h58

Bonjour a tous, je me demandais si il y avais un moyen d'effectuer cette r�duction plus rapidement qu'en passant par une boucle (il peu y avoir 10000 element dans l'array) car ces derni�res ont l'air de ralentir consid�rablement IE.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
tab_dn = new Array();
for (var i=0;i<users.length;i++){
     tab_dn[i] = users[i]['dn'];
}

Merci

**le_chomeur** · 01/09/2009, 11h44

bonjour , tu peux tester ceci :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
tab_dn = new Array();
for (var i=0, l = users.length;i<l;i++){
     tab_dn.push(users[i]['dn']);
}

ou encore

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
 
var tab_dn = new Array();
var max = users.length;
var i = 0 ;
while(i!=max){
     tab_dn[i] = users[i]['dn'];
     i++;
}

**DoubleU** · 01/09/2009, 11h45

T'es sur que c'est pas plutot la partie effectuant le traitement a partir de ton tableau qui est long?

Sinon essaie ca:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

tab_dn.push(users[i]['dn']);

**nod__** · 01/09/2009, 11h57

Je dirais m�me plus

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
var tab_dn = [];
var i = users.length;
while (i--) {
     tab_dn[i] = users[i]['dn'];
}

( edit )

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
var tab_dn = [];
var i = users.length;
while (i--) {
     tab_dn.push(users[i]['dn']);
}

**franculo_caoulene** · 01/09/2009, 12h29

Je ne jurerais de rien! Avec toutes les nouvelles versions de navigateurs on obtient des r�sultats moins clairs qu'avant j'ai l'impression. Document de test :

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
<!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>
  <title>différences de performance entre une boucle for et une boucle while, push et affectation</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  * {margin:0;padding:0;}
  body {margin:10px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
  </style>
</head>
<body>
  <p id="fl1">for (length recalculé) : </p>
  <p id="fl2">for (avec push et length recalculé) : </p>
  <p id="f1">for : </p>
  <p id="f2">for (avec push) : </p>
  <p id="w1">while : </p>
  <p id="w2">while (avec push) : </p>
  <script type="text/javascript">
  <!--
  var fl1 = document.getElementById("fl1");
  var fl2 = document.getElementById("fl2");
  var f1 = document.getElementById("f1");
  var f2 = document.getElementById("f2");
  var w1 = document.getElementById("w1");
  var w2 = document.getElementById("w2");
 
  var ti = new Array();
  ti.length = 100000;
 
  var t1a = new Array();
  var debut = new Date();
  for (var i=0; i<ti.length; i++) {
    t1a[i] = i;
  }
  var fin = new Date()
  fl1.firstChild.nodeValue = "for (length recalculé) : "+ (fin - debut) +" ms";
 
  var t1b = new Array();
  var debut = new Date();
  for (var i=0; i<ti.length; i++) {
    t1b.push(i);
  }
  var fin = new Date()
  fl2.firstChild.nodeValue = "for (avec push et length recalculé) : "+ (fin - debut) +" ms";
 
  var t2a = new Array();
  var debut = new Date();
  for (var i=0,imax=ti.length; i<imax; i++) {
    t2a[i] = i;
  }
  var fin = new Date()
  f1.firstChild.nodeValue = "for : "+ (fin - debut) +" ms";
 
  var t2b = new Array();
  var debut = new Date();
  for (var i=0,imax=ti.length; i<imax; i++) {
    t2b.push(i);
  }
  var fin = new Date()
  f2.firstChild.nodeValue = "for (avec push) : "+ (fin - debut) +" ms";
 
  var t3a = new Array();
  i = ti.length;
  debut = new Date();
  while(i--){
    t3a[i] = i;
  }
  fin = new Date()
  w1.firstChild.nodeValue = "while : "+ (fin - debut) +" ms";
 
  var t3b = new Array();
  i = ti.length;
  debut = new Date();
  while(i--){
    t3b.push(i);
  }
  fin = new Date()
  w2.firstChild.nodeValue = "while (avec push) : "+ (fin - debut) +" ms";
  //-->
  </script>
</body>
</html>

**bandoine** · 01/09/2009, 12h48

Merci a tous,
En r�alit� le traitement est relativement long.
(sous IE 7.0.5730.13 environ 3 a 4 secondes alors que sous firefox 3.5.2 210ms (estim� avec le profileur firebug) en moyenne )
Et ceci apr�s plusieurs heures optimisation d�j�, je cherche maintenant a grappiller encore quelques millisecondes histoire de faire patienter les utilisateurs le moins possible, et pour le moment la ou j'ai gagner le plus de temps sous IE c'est en supprimant/all�geant les boucles.

J'ai quand m�me du mal a comprendre pourquoi IE m�me si c'est certes une version qui date un peu plus que celle de mon Firefox met 20x plus de temps a ex�cuter un script qui est relativement peu complexe sur une page qui m�me si elle contient un formulaire contenant plusieurs milliers de champs reste d'une structure fort simple.

**le_chomeur** · 01/09/2009, 13h28

et en essayant d'externaliser le remplissage ?

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
var t2a = new Array();
 
var remplir = function(t){
  t2a[i] = i;
}
 
var tempo = null;
for (var i=0,imax=ti.length; i<imax; i++) {
   tempo = new remplir(t);
}

**bandoine** · 01/09/2009, 13h53

J'ai lancer le document de test de franculo_caoulene sous IE et firefox, le r�sultat est sans appel :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
 
IE 7
for (length recalculé) : 344 ms
for (length recalculé) : 453 ms
for : 266 ms
for : 453 ms
while : 265 ms
while : 454 ms

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
 
IE 8
for (length recalculé) : 125 ms
for (length recalculé) : 203 ms
for : 78 ms
for : 141 ms
while : 171 ms
while : 110 ms

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
 
FIREFOX 3.5.2
for (length recalculé) : 4 ms
for (length recalculé) : 468 ms
for : 4 ms
for : 11 ms
while : 61 ms
while : 10 ms

Certes ici IE n'est pas la derni�re g�n�ration, mais je trouve les r�sultats tr�s impressionnants

**le_chomeur** · 01/09/2009, 14h32

=> 1ms sous firefox
=> 60ms sous IE7

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
	</head>
	<body>
		<script type="text/javascript">
			var t2a = new Array();
 
var remplir = function(t){
  t2a[i] = i;
}
 
var tempo = null;
Debut = new Date(); 
for (var i=0,imax=10000; i<imax; i++) {
   tempo = remplir(i);
}
Fin = new Date();
alert(Fin-Debut+ " ms d'execution javascript"); 
		</script>
	</body>
</html>

**kimjoa** · 02/09/2009, 22h10

concernat les boucles j'ai cr�er un petit bench sinon pour r�sumer, la meilleur syntaxe est celle-ci

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
var monTableau = ['val1', 'val2', ....];
 
for(var i = -1 , e; e = monTableau[++i]){
   traitement ...
}

ou pour un while

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
var monTableau = ['val1', 'val2', ....], i = -1, e;
 
while(e = monTableau[++i]){
   traitement ...
}

il faut pr�ciser que la condition doit retourner une valeur positive ... soit le double inverse boolean doit �tre � true (!!e = true), donc si ton tableau poss�de des valeur null ou ind�fini, il faudra plus faire �a.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
for(var i = -1 , l = monTableau.length, e; l > ++i;){
   e = monTableau[i];
   traitement ...
}

ou pour le while

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
 
var monTableau = ['val1', 'val2', ....], i = -1,  l =  monTableau.length, e;
 
while(l > ++i){
   e = monTableau[i];
   traitement ...
}

j'allais oublier, le push fait perdre du temps, si tu dois enregistrer un r�sultat dans un autre tableau, soit si tu peux, utilise l'index du tableau d'origine, soit cr�er un index pour sp�ciale pour le nouveaux tableau, ou plus simple mais un peux moin performant ->

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
 
var monTableau = ['val1', 'val2', ....], monAutreTableau = [], i = -1,  l =  monTableau.length, e;
 
while(l > ++i){
   e = monTableau[i];
   monAutreTableau[monAutreTableau.length] = e;
   traitement ...
}

bye

**franculo_caoulene** · 03/09/2009, 10h29

J'ai d�j� vu ce genre de syntaxe disant qu'elle est optimis�e, mais quand j'essaie de al reproduire �a plante. Tu pourras peut-�tre me dire o� j'ai faux :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
  var t4a = new Array();
var debut = new Date();
for (var i=-1,e; e=t4a[++i]) {
  t4a.push(i);
}
var fin = new Date()

J'ai une erreur de syntaxe au niveau la boucle for dans tous les navigateurs (IE8 ; FF3.5 ; Opera 10 ; Safari 4).

De plus, dans ton banc d'essai, tu ne parles pas de cette syntaxe.

**kimjoa** · 03/09/2009, 13h46

salut, l� ou ca plante, c'est que tu as oubli� un ';' a la fin de tas zone conditionnelle , par exemple il est tout � fait possible de faire �a

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
for(;;){
   if(machintruc)
       break;
}

sinon comme je l'ai dit si tu doit utiliser bcp d'item du tableau dans ton code , la syntaxe permettant de r�f�rencer cette item dans la zone conditionnelle est valable que si cette item n'a pas de valeur null, car sinon la condition est fausse...

quand tu fais

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
var array = new Array();
for(var i =-1, a; a=array[++i];){
    //traitement
}

il ne se produira aucune it�ration car le tableau est vide , est la condition -> a=array[++i] , renvoie la valeur de a , soit null.

dans ce cas , et oui j'ai pas mit dans mon bench, le mieux est la syntaxe

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
var array = new Array(0,1,2,3,4,5,6,7);
for(var i =-1, l = array.length, a; l > ++i;){
    a = array[i]
    //traitement
}

sinon au premier item, valant z�ro, la condition serait pass� � null, et donc aucune it�ration...

voil� j'esp�re avoir �t� un peu plus claire bye!

**franculo_caoulene** · 03/09/2009, 14h08

En effet, j'oubliais le point-virgule et suis s�r que je l'oubliais d�j� la premi�re fois que j'�tudiais cette syntaxe!

Par contre, les r�sultats entre les deux boucles for n'est pas vraiment probant. Les performances d�pendant du nombre d'it�rations et du navigateurs. Je privil�gierais donc celle-ci

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
for (var i=0,imax=ti.length; i<imax; i++) {
  t2a[i] = i;
}

car, plus lisible.

**DoubleU** · 04/09/2009, 17h46

Je ne suis pas vraiment (pas du tout meme

) d'accord avec toi kimjoa.

D�ja, ta m�thodologie n'est pas bonne: tu ne testes qu'une seule fois chaque boucle et tu en d�duis ton r�sultat. Le probl�me, c'est que si au moment ou tu fais untest, ton cpu est occup� a autre chose, ben les perf de ce test vont en prendre un coup, ce qui va entrainer un biais.

Si tu fais la moyenne des dur�es sur plusieurs it�rations, tu verras que le r�sultat est diff�rent:

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
<html>
 
	<body>
		<script>
 
		var tab = new Array();
		for(var v=0;v<100000;v++) tab.push(v+2);
 
		function timer(what)
		{
			var start = new Date();
			what();
			var stop = new Date();
			return stop.getTime() - start.getTime()
		}
 
		function average(what, nb)
		{
			var t = 0;
			for(var v=0; v<nb; v++)
			{
				t += timer(what);
			}
			return t/nb;
		}
 
		function f1()
		{
			for(var i = -1 , e; e = tab[++i];)
			{
				var foo = e+e;
			}
		}
 
		function f2()
		{
			for(var i=0, e; i<tab.length; i++)
			{
				e = tab[i]; // pour accéder a l'élément, comme dans f1
			}
		}
 
		function f3()
		{
			var foo = 0;
			for(var i=tab.length,e; i>0;i--)
			{
				e = tab[i];
			}
		}
 
		var n = 500;
 
		console.log("f1", average(f1,n));
		console.log("f2", average(f2,n));
		console.log("f3", average(f3,n));
 
		</script>
	</body>
 
 
</html>

On obtient:

Envoy� par firebug

f1 4.228
f2 1.724
f3 1.682

Pourquoi cet �cart? Parce que dans f1, pour invalider la comparaison, il faut soit que e soit NaN, undefined, null, false ou �gal � 0 (j'ai rien oubli� je crois ^^), c'est � dire faire une op�ration d'objets complexes pour certains d'entre eux.
Dans f2, c'est une simple comparaison bit a bit entre 2 nombres.
Dans f3, c'est une op�ration bit a bit entre 0 et un nombre, donc plus rapide que f2.

**kimjoa** · 04/09/2009, 21h41

hello!! tout d'abord ton explication est tr�s int�ressante et semble logique.

Pourtant j'ai test� ton code (ou presque) , sous IE, et l� tout semble illogique

voici le code

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
 
var tab = new Array();
		for(var v=0;v<10000;v++) tab.push(v+2);
 
		function timer(what)
		{
			var start = new Date();
			what();
			var stop = new Date();
			return stop.getTime() - start.getTime()
		}
 
		function average(what, nb)
		{
			var t = 0;
			for(var v=0; v<nb; v++)
			{
				t += timer(what);
			}
			return t/nb;
		}
 
		function f1()
		{
			for(var i=0, e, l = tab.length; i<l; i++){
				e = tab[i]; // pour accéder a l'élément, comme dans f1
			}
		}
		function f2()
		{
			for(var i = 0 , e; e = tab[i];i++){}
		}
		function f3()
		{
			for(var i = -1 , e; e = tab[++i];){}
		}
 
		var n = 80;
 
		alert(average(f1,n));
		alert(average(f2,n));
		alert(average(f3,n));

r�sultat f1 -> 2.75
r�sultat f2 -> 2.53
r�sultat f2 -> 2.33

Tout est invers� entre IE et FF, malgr�s que les �carts soit plus faible.
j'ai fais un bench et avais tir� la conclusion tros ative sans doute que la 1er solution �tait la bonne...

voil�, je pense au final r�-adopter les boucles classique, et sans doute supprimer mon bench, mais je serais tr�s int�resser de savoir comment tu interpr�te ses r�sultat sous IE.

dsl, pour les autres si j'ai pu vous mettre dans l'erreur

bye

**DoubleU** · 07/09/2009, 00h05

Peut �tre que ca vient de ta d�claration des variables e et l dans la boucle.

En d�clarant f1:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
 
function f1()
{
	var e;
	var l = tab.length;
	for(var i=0; i<l; i++){
		e = tab[i]; // pour accéder a l'élément, comme dans f1
	}
}

elle semble redevenir plus rapide mais ie me fait chier a vouloir arreter le script, donc je ne peux pas trop tester.

Optimisation de boucle JS

JavaScript

Discussions similaires

Partager

Partager