Discussion :

[asagtoth]

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]

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]

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]

Salut,

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

[asagtoth]

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]

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