Neige javascript et consommation mémoire [Résolu]

Jean-Georges · 17/12/2011, 21h11

Bonsoir,
J'ai voulu intégrer de la neige sur un site web et j'ai trouvé ce script qui fonctionne bien mais provoque un leak de mémoire qui éssoufle rapidement un pc modeste :http://rainbow.arch.scriptmania.com/...ow_fall_1.html

En regardant le code, je ne vois pas ce qui provoque l'augmentation de consommation mais javascript n'est pas un langage que je connais très bien (je maîtrise assez bien jQuery mais cela fait longtemps que je n'ai pas codé sans lui).
Peut-être que cela paraîtra évident à l'un d'entre vous ?
Merci d'avance :

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<SCRIPT type="text/javascript">
/*
Snow Fall 1 - no images - Java Script
Visit http://rainbow.arch.scriptmania.com/scripts/
  for this script and many more
*/
 
// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35
 
// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff")
 
// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Times","Arial","Times","Verdana")
 
// Set the letter that creates your snowflake (recommended: * )
var snowletter="*"
 
// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6
 
// Set the maximum-size of your snowflakes
var snowmaxsize=30
 
// Set the minimal-size of your snowflakes
var snowminsize=8
 
// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1
 
///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////
 
 
// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera
 
function randommaker(range) {
        rand=Math.floor(range*Math.random())
    return rand
}
 
function initsnow() {
        if (ie5 || opera) {
                marginbottom = document.body.scrollHeight
                marginright = document.body.clientWidth-15
        }
        else if (ns6) {
                marginbottom = document.body.scrollHeight
                marginright = window.innerWidth-15
        }
        var snowsizerange=snowmaxsize-snowminsize
        for (i=0;i<=snowmax;i++) {
                crds[i] = 0;
            lftrght[i] = Math.random()*15;
            x_mv[i] = 0.03 + Math.random()/10;
                snow[i]=document.getElementById("s"+i)
                snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
                snow[i].size=randommaker(snowsizerange)+snowminsize
                snow[i].style.fontSize=snow[i].size+'px';
                snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
                snow[i].style.zIndex=1000
                snow[i].sink=sinkspeed*snow[i].size/5
                if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
                snow[i].style.left=snow[i].posx+'px';
                snow[i].style.top=snow[i].posy+'px';
        }
        movesnow()
}
 
function movesnow() {
        for (i=0;i<=snowmax;i++) {
                crds[i] += x_mv[i];
                snow[i].posy+=snow[i].sink
                snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
                snow[i].style.top=snow[i].posy+'px';
 
                if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
                        if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                        if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                        if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                        if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                        snow[i].posy=0
                }
        }
        var timer=setTimeout("movesnow()",50)
}
 
for (i=0;i<=snowmax;i++) {
        document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
        window.onload=initsnow
}
 
</SCRIPT>

utopman · 18/12/2011, 00h24

le script est bien fait, mais il marche avec du setTimeout() pour plus de compatibilité.
le souci c'est que du coup c'est un script récursif , et les fonctions exécutées s'entassent dans la mémoire sans se terminer. Il y a bien set Interval qui permettrait d'arranger la chose, mais bizarrement, chez moi ca ne veut par marcher.

j'ai également corrigé le code (il manquait plein de ; ) ce qui rendait le code moins conforme...

j'ai observé que sous chrome le garbage collector marche au bout de 10 -15 Megas, tandis que sous firefox , c'est apres 100-120 Megas que ca se déclenche.

En tout cas ca semble stable.

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/*
Snow Fall 1 - no images - Java Script
Visit http://rainbow.arch.scriptmania.com/scripts/
  for this script and many more
*/
 
// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax = 35;
 
// Set the colors for the snow. Add as many colors as you like
var snowcolor = new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff");
 
// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype = new Array("Times","Arial","Times","Verdana");
 
// Set the letter that creates your snowflake (recommended: * )
var snowletter = "*";
 
// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed = 0.6;
 
// Set the maximum-size of your snowflakes
var snowmaxsize = 30; 
 
// Set the minimal-size of your snowflakes
var snowminsize = 8;
 
// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone = 1;
 
///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////
 
 
// Do not edit below this line
var snow=[];
var marginbottom;
var marginright;
var i_snow = 0;
var x_mv = new Array();
var crds = new Array();
var lftrght = new Array();
var browserinfos = navigator.userAgent;
var ie5 = document.all&&document.getElementById&&!browserinfos.match(/Opera/);
var ns6 = document.getElementById&&!document.all;
var opera = browserinfos.match(/Opera/);
var browserok = ie5||ns6||opera;
 
function randommaker(range) {
        rand=Math.floor(range*Math.random());
    return rand;
}
 
function initsnow() {
        if (ie5 || opera) {
                marginbottom = document.body.scrollHeight;
                marginright = document.body.clientWidth-15;
        }
        else if (ns6) {
                marginbottom = document.body.scrollHeight;
                marginright = window.innerWidth-15;
        }
        var snowsizerange=snowmaxsize-snowminsize
        for (i=0;i<=snowmax;i++) {
                crds[i] = 0;
            lftrght[i] = Math.random()*15;
            x_mv[i] = 0.03 + Math.random()/10;
                snow[i] = document.getElementById("s"+i);
                snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)];
                snow[i].size = randommaker(snowsizerange)+snowminsize;
                snow[i].style.fontSize = snow[i].size+'px';
                snow[i].style.color = snowcolor[randommaker(snowcolor.length)];
                snow[i].style.zIndex = 1000;
                snow[i].sink = sinkspeed*snow[i].size/5;
                if (snowingzone==1) {snow[i].posx = randommaker(marginright-snow[i].size)};
                if (snowingzone==2) {snow[i].posx = randommaker(marginright/2-snow[i].size)};
                if (snowingzone==3) {snow[i].posx = randommaker(marginright/2-snow[i].size)+marginright/4};
                if (snowingzone==4) {snow[i].posx = randommaker(marginright/2-snow[i].size)+marginright/2};
                snow[i].posy = randommaker(2*marginbottom-marginbottom-2*snow[i].size);
                snow[i].style.left = snow[i].posx+'px';
                snow[i].style.top = snow[i].posy+'px';
        }
 
}
 
function movesnow() {
        for (i=0;i<=snowmax;i++) {
                if (snow[i] != undefined){
					crds[i] += x_mv[i];
					snow[i].posy += snow[i].sink;
					snow[i].style.left = snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
					snow[i].style.top = snow[i].posy+'px';
 
					if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
							if (snowingzone == 1) {snow[i].posx=randommaker(marginright-snow[i].size)};
							if (snowingzone == 2) {snow[i].posx=randommaker(marginright/2-snow[i].size)};
							if (snowingzone == 3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4};
							if (snowingzone == 4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2};
							snow[i].posy=0;
					}
			}
        }
 
}
 
for (i=0;i<=snowmax;i++) {
        document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
        window.onload=initsnow;
		setInterval(movesnow,0);
}

SpaceFrog · 18/12/2011, 08h42

ça me rappelle quelque chose ...
http://www.developpez.net/forums/d84...r-chute-neige/

A priori pas de fuite non plus mais l'accumulation des setInterval est gourmand..

Willpower · 18/12/2011, 16h34

http://www.google.be/#hl=fr&sugexp=p...8290a40dba6c61

Eric2a · 18/12/2011, 18h29

Salut,

Citation:

Envoyé par utopman

il marche avec du setTimeout() pour plus de compatibilité.
le souci c'est que du coup c'est un script récursif, et les fonctions exécutées s'entassent dans la mémoire sans se terminer.

Pas du tout.

Le code ci-dessous est bien récursif et requiert donc de Javascript de mémoriser les variables locales, etc...

Code :

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

1
2
3
4
function test(){
	/* ... */
	test(); // Appel récursif
}

Tandis que la fonction setTimeout() permet juste de différer l'appel.

Ceci dit, il est vrai que si la fonction appelée n'est pas "réentrante" et que l'appel différé survient avant que la fonction ne soit effectivement terminée, cela peut créer des soucis.

Pour contrer cela, nous pouvons utiliser un drapeau.

Code :

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

1
2
3
4
5
6
7
8
9
var inUse=false;
 
function test(){
	if(inUse)return;
	inUse=true;
	/* ... */
	setTimeout(test,1000); // Programme l'appel différé
	inUse=false;
}

Jean-Georges · 19/12/2011, 09h19

Bonjour,
J'ai d'abord modifié le code en remplaçant le timeOut par un timer jQuery, celà n'a rien changé.
J'ai ensuite remplacé les lignes

Code :

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

1
2
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
snow[i].style.top=snow[i].posy+'px';

par du jquery.css et la mémoire semble maintenant se vider automatiquement au lieu de s'accumuler indéfiniment.
A tester sous d'autres navigateurs toutefois.

18/12/2011, 08h42	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 071 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 071 Points : 45 202 Points : 45 202	ça me rappelle quelque chose ... http://www.developpez.net/forums/d84...r-chute-neige/ A priori pas de fuite non plus mais l'accumulation des setInterval est gourmand.. __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	10

18/12/2011, 16h34	#4
Willpower Membre Expert Boris Dessy sans emploi Inscription : décembre 2010 Messages : 872 Détails du profil Informations personnelles : Nom : Boris Dessy Localisation : Belgique Informations professionnelles : Activité : sans emploi Informations forums : Inscription : décembre 2010 Messages : 872 Points : 1 381 Points : 1 381	http://www.google.be/#hl=fr&sugexp=p...8290a40dba6c61
	10

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email