Javascript et charge processeur

Version imprimable

Bonjour à tous,

j'ai un soucis au niveau de la charge processeur avec une de mes fonctions javascript.
Cette fonction pourtant simple, qui affiche un texte lettre par lettre, arrive à faire ramer un pc qui a 5 ans et à utiliser 50% de mon AMD Turion 64 x2 cadencé à 1,61 GHz ce qui est énorme je trouve, je me suis aperçu de ce soucis en testant les outils pour développeur présent sur Google Chrome qui sont plutôt interessants pour la programmation en javascript

voici ma fonction:

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
 
<SCRIPT LANGUAGE=JavaScript>
ejs_box2_message = new Array;
ejs_box2_message[1] = 'Bonjour';
ejs_box2_actual = 0;
             ejs_box2_html_flag = 0;
 
             function ejs_box2_go()
                 {
                 if(document.getElementById)
                     {
                     ejs_box2_char = 1;
                     ejs_box2_affich(ejs_box2_actual)
                     ejs_box2_actual++;
                     if(ejs_box2_actual >= ejs_box2_message.length)
                         ejs_box2_actual = 0;
                     }        
                 }
 
             function ejs_box2_affich(lactual)
                 {
                 var pix = ejs_box2_message[lactual].charAt(ejs_box2_char);
                 if(pix == "<")
                     ejs_box2_html_flag = 1;
                 if(pix == ">")
                     ejs_box2_html_flag = 0;
                 var texte = ejs_box2_message[lactual].substring(0,ejs_box2_char);
                 document.getElementById("ejs_box2_box").innerHTML = texte;
                 if(ejs_box2_char < ejs_box2_message[lactual].length)
                     {
                     ejs_box2_char++;
                     if(ejs_box2_html_flag == 1)    
                         ejs_box2_affich(lactual);
                     else
                         setTimeout("ejs_box2_affich("+lactual+")",50)
                     }
                 else
                     setTimeout("ejs_box2_go()",3000)
                 }
 
             window.onload = ejs_box2_go;

Mais ce n'est pas la première fois que je remarque ce soucis mais la fois précédente je faisais un carroussel avec des images et je pensais que c'était à cause du poids des images et de la complexité de la fonction. Mais là j'ai du mal à comprendre.

Merci d'avance

28/05/2009, 23h20
asagtoth

re bonjour, j'actualise.

J'ai fait un test du script sur Chrome : 27% de charge de processeur, ce coup ci un Pentium E2180 cadencé à 2GHz, à chaque fois qu'un texte s'écrit.

Sur Firefox 30%

et sur IE7 1%

je suis étonné de ma découverte, j'ai fait 2 fois pour être sur 8O

Dans le post "Bonnes pratiques JavaScript" il est expliqué que certain code ne sont plus adaptés aux nouveaux navigateurs. Ce doit être le cas pour le mien.

Mais où?
29/05/2009, 00h31
asagtoth

Bonsoir,

j'ai poursuivi mes investigations concernant la charge de processeur et le javascript.

je suis tombé sur cette page :
http://www.gcmingati.net/wordpress/w...llanimate.html

On y voit un texte défilant là nouveaux résultats:

IE7 : 2% charge processeur
Firefox 3 : 15 à 20%
Chrome : 6 à 8 %

Pourquoi IE7 ressort toujours premier et souvent de loin?
29/05/2009, 10h20
franculo_caoulene

Salut,

T'aurais pas un code exécutable directement en faisant un simple copier/coller? Code (x)HTML/CSS/Javascript.

Bonjour,

j'ai fait une page où il n'y a que la fenêtre et là surprise le processeur n'est monté qu'à 2% pour tous les navigateurs.

Est ce que celà veux dire qu'à chaque fois que les lettres s'affichent, firefox et Chrome recharge entièrement la page et donc tout le contenu relativement dense.

A la base, le javascript est créé par une fonction php mais même lorsque je le met en dur dans ma page c'est pareil.

Voici quand même le code simplifié qui charge à 2%

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
50
51
52
53
54
55
56
<html>
<head>
<title>Test Processeur</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body>
<DIV ID=ejs_box2_box STYLE="background:#79A2A2;color:#000000;font-family:Arial;font-size:14;border-style:solid;border-
 
width:1;border-color:#000000;width:200;height:100;padding:5"></DIV>
<SCRIPT LANGUAGE=JavaScript>
ejs_box2_message = new Array;
ejs_box2_message[0] = 'Bonjour';
ejs_box2_message[1] = 'Bonjour slkdflsdkfsdkf';
ejs_box2_message[2] = 'Bonjour kdfjlskdflskdnflskdnflskdfn';
ejs_box2_message[3] = 'Bonjour zlekfj,mze,fmzle,fzenfjzenfzleofnzje';
ejs_box2_actual = 0;
             ejs_box2_html_flag = 0;
 
             function ejs_box2_go()
                 {
                 if(document.getElementById)
                     {
                     ejs_box2_char = 1;
                     ejs_box2_affich(ejs_box2_actual)
                     ejs_box2_actual++;
                     if(ejs_box2_actual >= ejs_box2_message.length)
                         ejs_box2_actual = 0;
                     }        
                 }
 
             function ejs_box2_affich(lactual)
                 {
                 var pix = ejs_box2_message[lactual].charAt(ejs_box2_char);
                 if(pix == "<")
                     ejs_box2_html_flag = 1;
                 if(pix == ">")
                     ejs_box2_html_flag = 0;
                 var texte = ejs_box2_message[lactual].substring(0,ejs_box2_char);
                 document.getElementById("ejs_box2_box").innerHTML = texte;
                 if(ejs_box2_char < ejs_box2_message[lactual].length)
                     {
                     ejs_box2_char++;
                     if(ejs_box2_html_flag == 1)    
                         ejs_box2_affich(lactual);
                     else
                         setTimeout("ejs_box2_affich("+lactual+")",50)
                     }
                 else
                     setTimeout("ejs_box2_go()",3000)
                 }
 
             window.onload = ejs_box2_go;</script>
 
</body>
</html>

02/06/2009, 12h54
franculo_caoulene

J'ai regardé, uniquement pour FF, je n'ai pas réussi à optimiser, ça peut monter à 7%, mais juste au début. Ensuite ça stagne à 0% de mon coté.
02/06/2009, 13h00
SpaceFrog

essaye setInterval plutot que setTimeout en boucle
02/06/2009, 13h08
Msieurduss

Au passage, il me semble bien que les prochaines versions de Firefox soient prévues pour optimiser les chargements et exécutions des javascripts...
Firefox est en effet très gourmand là-dessus !

Sur le lien que tu as donné (jQuery), mes performances perdent près de 40% !!!
(j'ai le même proc que toi ici d'où je poste, à savoir AMD Turion 64 1,60 GHz)
02/06/2009, 20h22
Bovino

Il faut aussi savoir que passer une chaîne de caractères en paramètres d'un timer oblige l'interpréteur à passer par son compilateur, ce n'est pas forcément optimisé ;)
02/06/2009, 23h44
asagtoth

bonjour à tous,

Merci Msieurduss du comment, il est vrai que sur des machines actuelles ça se remarque à peine mais avec des pcs de 3 à 5 ans ça peut faire lourd ces charges processeurs.
Moi ce qui m'inquiète c'est que les fabricants de matériel informatique commencent à se rendre compte que la majeur partie des utilisateurs utilise 5 à 10% de leur pc acheté récemment et commencent à fabriquer du matériel à moindre coût et donc à puissance limité.

Sinon je vais tenter avec un setinterval comme tu le préconises SpaceFrog mais Bovino il est vrai que l'affichage d'un texte lettre par lettre implique plus de puissance qu'un simple texte mais comment faire un affichage dynamique sans bouffer un quart de ta puissance?
02/06/2009, 23h52
michel.bosseaux

J'ai une idée, peut-être tordue (et peut-être pas en rapport avec ce que tu veux faire non plus, il est tard je fatigue :zoubi:) mais imaginons un instant :
Tu as une zone rectangulaire dans ta page dans laquelle tu affiches ton texte complet, de manière à ce que le navigateur tronque l'affichage ... mais que ça soit quand même là (avec des propriétés CSS overflow bien senties ça doit être possible)

Et ton code de défilement se contente alors de changer les coordonnées du texte dans la zone (en jouant en javascript sur le positionnement avec top, left, right ou bottom selon le sens vers lequel tu veux défiler).

Ca me paraît réaliste, bien que je ne saurais pas comme ça te donner la syntaxe exacte...

Et je ne pense pas que ça demanderait trop de processeur non plus.
02/06/2009, 23h52
asagtoth

re bonsoir,
j'ai tenté donc un simple remplace de setTimeOut par setInterval et le résultat est pire, le processeur même sur IE commence à 0% puis mon progressivement pour plafoner à 50%.
Je n'ai rien touché de plus pour l'instant.

Comment comprendre cette modification?
03/06/2009, 02h12
Bovino

Il faudrait voir ton code pour pouvoir répondre précisément, mais le symptôme semble indiquer que tu lances de multiples setInterval sans écraser les précédents, ce qui implique une grosse surcharge du processeur.
Si on reprend ton code précédent et en imaginant que tu aies juste remplacé les setTimeout par des setInterval, cela signifierait qu'à chaque passage dans la fonction, tu chaque setInterval en génère un nouveau !

Quant à ma remarque précédente, elle concerne uniquement la syntaxe. A titre d'exemple,

Code:

setTimeout("une_fonction()",100);

implique qu'à la fin du timer (100ms), la chaîne "une_fonction()" doit être interprétée en appelant le compilateur JavaScript (ce qui est lourd surtout pour une fonction récurrente) alors que

Code:

setTimeout(function(){une_fonction()},100);

se contentera d'appeler une fonction déjà passée par le compilateur, ce qui représente un gain non négligeable de performance.
03/06/2009, 07h22
michel.bosseaux

Ma réponse (deux messages plus haut) est p-e passée inaperçue, alors je me permet de la resignaler...
03/06/2009, 08h44
SpaceFrog

J'ai aussi croisé des saturations de processeurs sous IE du a des gestions laborieuses de position d'objet dans le flux essaye de mettre ton div en position absolute ? et de préciser également les unités des hauteur et largeur

Code:

width:200px;height:100px

je ne suis pas certain que la position est une importance spaffy ;-)

par contre je vois l'utilisation de méthode qui elles sont gourmande :

Code:

1
2
ejs_box2_message[lactual].substring(0,ejs_box2_char);
ejs_box2_message[lactual].charAt(ejs_box2_char);

si tu veux travailler sur des string il faut les caster dès le départ avec new String()...

ensuite comme te l'as conseillé spaffy , utiliser un setInterval plutôt qu'un setTimeout ( asynchrone , ne bloquera donc pas sur tes boucles pour relancer un nouveau processus ... )

pour arriver au résultat final, j'aurais plutôt utiliser un conteneur que j'aurais simplement déplacé :)

un vieux truc qui pourra peut-être t'aider , je monte a 4% proco :

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
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
 
<!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>
		<style type="text/css">
		body {margin:0px}
		#listYear {border:1px solid #666;position:relative;overflow:hidden;}
		#listYear span{position:absolute;display:block;width:100px;background-color:green;text-align:center;z-index:100;font-weight:bold;}
		</style>
 
		<script type="text/javascript">
			var animTimer = null;
			function init(){
				var pos = 0 ;
				var c=document.createElement('div');
				c.id="listYear";
				c.style.width=100+"px";
				c.style.height=30+"px";
				document.body.appendChild(c);
 
				var d=document.createElement('div');
				d.style.width=10+"px";
				d.style.height=30+"px";
				d.style.position  = "absolute";
				d.style.left = 0 + "px";
				d.style.backgroundColor = "red";
				d.style.zIndex = "200";
				d.onmouseover = function(){
					animTimer = setInterval(function(){
						moveLeft()
						}, 30);
					}
				d.onmouseout = function(){
					clearInterval(animTimer);
				}
 
 
				c.appendChild(d);
				var pd = d.cloneNode(true);
				pd.style.left = 90 + "px";
				pd.onmouseover = function(){
					animTimer = setInterval(function(){
						moveRight()
						}, 50);
					}
				pd.onmouseout = function(){
					clearInterval(animTimer);
				}	
				c.appendChild(pd);
				//Ajout des dates
				for(var i = 0 ; i != 3 ; i++){
					var MySpan=document.createElement('span');
					MySpan.innerHTML = 1980+i;
					MySpan.style.left = pos + "px";
					pos += 100 ;
					c.appendChild(MySpan);
				}
			}
 
			function moveLeft(){
				var listYear = document.getElementById('listYear').getElementsByTagName('span');
				for (var i = 0; i != 3; i++) {
					listYear[i].style.left = (parseInt(listYear[i].style.left) - 5 )+"px";
					if(parseInt(listYear[i].style.left) <= -100){
						listYear[i].innerHTML = parseInt(listYear[i].innerHTML) + 3 ;
						listYear[i].style.left = 190+"px";
					}
				}
			}
 
			function moveRight(){
				var listYear = document.getElementById('listYear').getElementsByTagName('span');
				for (var i = 0; i != 3; i++) {
					listYear[i].style.left = (parseInt(listYear[i].style.left) +  5 )+"px";
					if(parseInt(listYear[i].style.left) >= 200){
						listYear[i].innerHTML = parseInt(listYear[i].innerHTML) - 3 ;
						listYear[i].style.left = -90+"px";
					}
				}
			}
 
		</script>
	</head>
 
	<body onload="init()">
 
	</body>
</html>

03/06/2009, 09h22
SpaceFrog

sisi fillot je t'assure j'ai déja constaté la chose, modifier dynamiquement du contenu ou la position d'un objet dans un flux oblige le proco à recacluler tout les reste du flux relativement.
Tu devrais benchmarker le truc tu seras surpris des différences de resultat entre un div de taille fixe ou de taille variable et entre une position relative et absolue...
03/06/2009, 09h50
le_chomeur

8O a tester effectivement , et question subsidiaire :
importance de passer par les style ou les css ??
03/06/2009, 09h53
SpaceFrog

je ne pense pas que la différence soit aussi importante, mais il est en général recommandé de passer par le css
03/06/2009, 10h15
franculo_caoulene

En effet, le coup du setInterval et du cast en String sont de bonnes idées. Mon message ne fait pas avancer la chose, mais je commence doucement le matin.

En fait je testais avec plusieurs onglets dans FF.

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
50
51
52
<html>
<head>
  <title>Test Processeur</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <style type="text/css">
    div {
      padding:5;
      width:200;
      height:100;
      border:1px solid #000;
      background:#79a2a2;
      font-family:Arial;
      font-size:14px;
    }
  </style>
</head>
<body>
  <DIV ID="ejs_box2_box">
  </DIV>
<SCRIPT LANGUAGE=JavaScript>
ejs_box2_message = new Array;
ejs_box2_message[0] = new String('Bonjour');
ejs_box2_message[1] = new String('Bonjour aaaaaaaaaaaaa');
ejs_box2_message[2] = new String('Bonjour aaaaaaaaaaaaaaaaaaaaaaaaaa');
ejs_box2_message[3] = new String('Bonjour aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
 
ejs_box2_actual = 0;
total = 0
function ejs_box2_go(){
  ejs_box2_char = 0;
  if(ejs_box2_actual >= ejs_box2_message.length){ejs_box2_actual = 0;}
  ejs_box2_affich(ejs_box2_actual);
}
 
function ejs_box2_affich(lactual){
  ejs_box2_char++;
  document.getElementById("ejs_box2_box").innerHTML = ejs_box2_message[lactual].substring(0,ejs_box2_char);
  if(ejs_box2_char===1){
    clearInterval(p);
    l = setInterval(function(){ejs_box2_affich(lactual);},50,lactual);
  }else if (ejs_box2_char === ejs_box2_message[lactual].length){
    clearInterval(l);
    ejs_box2_actual++;
    p = setInterval(function(){ejs_box2_go();},3000);
  }
}
 
p = setInterval(function(){ejs_box2_go();},10);ejs_box2_go();
</script>
 
</body>
</html>

Ce code utilise maximum 2% du CPU pour FF3, IE7, Opera9.6. Pour Safari3 c'est monté à 6% au tout début. Je pense que c'est raisonnable.

et en testant avec :

Code:

1
2
3
4
ejs_box2_message.push(new String('Bonjour'));
ejs_box2_message.push(new String('Bonjour aaaaaaaaaaaaa'));
ejs_box2_message.push(new String('Bonjour aaaaaaaaaaaaaaaaaaaaaaaaaa'));
ejs_box2_message.push(new String('Bonjour aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'));

à la place de :

Code:

1
2
3
4
ejs_box2_message[0] = new String('Bonjour');
ejs_box2_message[1] = new String('Bonjour aaaaaaaaaaaaa');
ejs_box2_message[2] = new String('Bonjour aaaaaaaaaaaaaaaaaaaaaaaaaa');
ejs_box2_message[3] = new String('Bonjour aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');

03/06/2009, 11h50
franculo_caoulene

Ben fais le! Quel feignant ce le_chomeur j'te jure!
03/06/2009, 12h28
le_chomeur

:mouarf: :mouarf: je porte bien mon pseudo loool
03/06/2009, 21h20
asagtoth

bonjour, Merci beaucoup

je prend note de vos remarques je vais tester un peu tout ça et je vous tiens informé