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