Problème de memory leak

Version imprimable

Bonjour,

Je voudrais créer une page qui affiche très régulièrement un graphique. La page est sensée resté ouverte indéfiniment et le graphique se rafraichir toute les quelques secondes.
J'ai un problème de memory leak avec ce bout de code. Il est beaucoup plus flagrant avec Firefox que IE. Pourriez-vous y jeter un coup d'oeil et me dire ce qui cloche ?

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
<html>
<HEAD>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="Expires" content="0" />
<SCRIPT LANGUAGE="JavaScript">
<!--
 
var delai_raf_image = 1 ;
var delai_raf_imageOnerror = 1 ;
var timeoutID ;
var new_graph = new Image ;
 
var partie_zoom ;
var partie_text ;
 
function refresh_src()
{
	new_graph.src = "graphe/test.png" + "?parm_bidon=" + Math.random() ;
	//new_graph.src = "graphe/courbe_instantanee.php" + "?parm_bidon=" + Math.random() ;
}
 
new_graph.onload = function()
{
	partie_zoom.innerHTML = '' ;
	partie_zoom.style.backgroundImage = 'url(' + new_graph.src + ')' ;
	partie_text.innerHTML = new_graph.src ;
    timeoutID = window.setTimeout("refresh_src()",delai_raf_image);
}
 
new_graph.onerror = function()
{
		partie_zoom.style.backgroundImage = '' ;
		partie_zoom.innerHTML = 'Erreur de communication avec le serveur.' ;
		timeoutID = window.setTimeout("refresh_src()",delai_raf_imageOnerror);
}
 
 
//-->
</SCRIPT>
<STYLE type="text/css">
<!--
#partie_zoom { border : 1px solid red ; height : 500px ; background-position : top left ; background-repeat : no-repeat ;  }
-->
</STYLE> 
</HEAD>
<body onload="JavaScript:refresh_src();" >
 
<h1>Affichage temps reel</h1>
 
<div id="text"></div>
<div id="partie_zoom"></div>
<a onClick="javascript:clearTimeout(timeoutID);return false;" href="#;" >Arreter</a>
<a onClick="JavaScript:refresh_src();return false;" href="#;" >Recommencer</a>
 
<SCRIPT LANGUAGE="JavaScript">
<!--
 
partie_zoom = document.getElementById("partie_zoom") ;
partie_text = document.getElementById("text")
 
//-->
</SCRIPT>
</body>
</html>

18/05/2007, 23h43
Auteur
bonjour,

plusieurs erreurs :
Code:

1 2 var new_graph = new Image() ;
onload est un événement de l'objet body. Il ne fonctionne pas sur les autres objets du document.

Citation:

La page est sensée resté ouverte indéfiniment et le graphique se rafraichir toute les quelques secondes.

Code:

setTimeout("fonction()","duree");

la duree est une valeur en millisecondes et non en secondes !
19/05/2007, 13h41
Tiberizz

Bonjour,

Merci de votre réponse mais je cherche plutôt où se trouve la fuite de mémoire. Le onload de l'image fonctionne, enfin si graphe/test.png existe. Le vrai problème est que le processus "firefox.exe" commence à consommer énormément de mémoire si je laisse la page tourner quelques minutes. Ca arrive très vite à 300 ou 400 Mo et mon pc n'aime pas trop :aie: Le délai très court du setTimeout est juste là pour mettre ça en évidence. Si je veux pouvoir laisser la page tourner plusieurs semaines il faut absolument que la consommation de mémoire n'explose pas au bout de quelques heures.

Sous IE finalement j'ai l'impression que ça ne fait pas, au moins beaucoup moins rapidement et je ne vois pas vraiment où il pourrait y avoir de fuite de mémoire dans ce code ... Il s'agirait donc d'un bug de firefox ? Il vaudrais mieux que je passe par une applet java ?

peut-être que cela vient de ces lignes de code :

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
 
var new_graph = new Image ;
 
 
function refresh_src()
{
	new_graph.src = "graphe/test.png" + "?parm_bidon=" + Math.random() ;
	//new_graph.src = "graphe/courbe_instantanee.php" + "?parm_bidon=" + Math.random() ;
}
 
new_graph.onload = function()
{
	partie_zoom.innerHTML = '' ;
	partie_zoom.style.backgroundImage = 'url(' + new_graph.src + ')' ;
	partie_text.innerHTML = new_graph.src ;
    timeoutID = window.setTimeout("refresh_src()",delai_raf_image);
}
 
new_graph.onerror = function()
{
		partie_zoom.style.backgroundImage = '' ;
		partie_zoom.innerHTML = 'Erreur de communication avec le serveur.' ;
		timeoutID = window.setTimeout("refresh_src()",delai_raf_imageOnerror);
}

Je me demande si à chaque setTimeout tu ne crées pas un nouvel objet image....

Pour modifier le background, tu peux te contenter d'une variable contenant une chaine de caractères :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
var srcImage = ""
function refresh_src()
{
	srcImage = "graphe/test.png" + "?parm_bidon=" + Math.random() ;
}
 
function loadImage()
{
	partie_zoom.innerHTML = '' ;
	partie_zoom.style.backgroundImage = 'url(' + srcImage  + ')' ;
	partie_text.innerHTML = srcImage  ;
    timeoutID = window.setTimeout("refresh_src()",delai_raf_image);
}
 
function erreur()
{
		partie_zoom.style.backgroundImage = 'none' ;
		partie_zoom.innerHTML = 'Erreur de communication avec le serveur.' ;
		timeoutID = window.setTimeout("refresh_src()",delai_raf_imageOnerror);
}

puis

Code:

1
2
 
<body onload="refresh_src();loadImage()" onerror="erreur()">

19/05/2007, 17h11
Tiberizz

Le problème c'est que je n'ai pas mon pc de boulot sous la main.
L'image est un graphique fait en php et peut mettre un certain temps pour être généré. Je veux attendre que la nouvelle image soit complètement chargée avant de la mettre à la place de l'ancienne. Avec ton code j'ai peur qu'au moment du changement il y ait un passage à blanc, qu'on voit le changement d'image.