Javascript et charge processeur

**asagtoth** · 28/05/2009, 21h08

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 :

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

**asagtoth** · 28/05/2009, 23h20

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

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

**asagtoth** · 29/05/2009, 00h31

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?

**franculo_caoulene** · 29/05/2009, 10h20

Salut,

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

**asagtoth** · 29/05/2009, 19h45

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 :

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

**franculo_caoulene** · 02/06/2009, 12h54

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

**SpaceFrog** · 02/06/2009, 13h00

essaye setInterval plutot que setTimeout en boucle

**Msieurduss** · 02/06/2009, 13h08

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)

**Bovino** · 02/06/2009, 20h22

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é

**asagtoth** · 02/06/2009, 23h44

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?

**michel.bosseaux** · 02/06/2009, 23h52

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

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

**asagtoth** · 02/06/2009, 23h52

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?

**Bovino** · 03/06/2009, 02h12

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 :

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

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 :

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

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.

**michel.bosseaux** · 03/06/2009, 07h22

Ma réponse (deux messages plus haut) est p-e passée inaperçue, alors je me permet de la resignaler...

**SpaceFrog** · 03/06/2009, 08h44

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 :

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

width:200px;height:100px

**le_chomeur** · 03/06/2009, 09h12

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 :

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

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 :

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

**SpaceFrog** · 03/06/2009, 09h22

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

**le_chomeur** · 03/06/2009, 09h50

a tester effectivement , et question subsidiaire :
importance de passer par les style ou les css ??

**SpaceFrog** · 03/06/2009, 09h53

je ne pense pas que la différence soit aussi importante, mais il est en général recommandé de passer par le css

**franculo_caoulene** · 03/06/2009, 10h15

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.

Javascript et charge processeur

JavaScript

Discussions similaires

Partager

Partager