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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
|
---
title: Gestion de la mémoire
slug: Web/JavaScript/Memory_Management
tags:
- JavaScript
- Mémoire
- Performance
translation_of: Web/JavaScript/Memory_Management
original_slug: Web/JavaScript/Gestion_de_la_mémoire
---
<div>{{JsSidebar("Advanced")}}</div>
<p>Les langages de bas niveau, tels que C, possèdent des primitives permettant de gérer la mémoire : <code><a href="https://pubs.opengroup.org/onlinepubs/009695399/functions/malloc.html">malloc()</a></code> et <code><a href="https://en.wikipedia.org/wiki/C_dynamic_memory_allocation#Overview_of_functions">free()</a></code> par exemple. En revanche, lorsqu'on utilise JavaScript, la mémoire est allouée lors de la création des objets puis libérée « automatiquement » lorsque ceux-ci ne sont plus utilisés. Cette libération automatique est appelée <em>garbage collection </em>en anglais ou ramasse-miettes. Le fait que ce processus soit automatique est souvent source de confusion et donne parfois l'impression que JavaScript (ou d'autres langages de haut niveau) ne permet pas de gérer la mémoire : nous allons voir que ce n'est pas le cas.</p>
<h2 id="Le_cycle_de_vie_de_la_mémoire">Le cycle de vie de la mémoire</h2>
<p>Quel que soit le langage de programmation, le cycle de vie de la mémoire ressemblera à :</p>
<ol>
<li>Allouer la mémoire dont on a besoin</li>
<li>Utiliser cette mémoire allouée (lecture, écriture)</li>
<li>Libérer la mémoire allouée lorsqu'on n'en a plus besoin</li>
</ol>
<p>Le deuxième point est explicite, au niveau du code, pour tous les langages de programmation. Le premier et le troisième points sont explicites pour les langages de bas niveau mais souvent implicites pour les langages de haut niveau tels que JavaScript.</p>
<h3 id="Allocation_de_la_mémoire_en_JavaScript">Allocation de la mémoire en JavaScript</h3>
<h4 id="Initialisation_des_valeurs">Initialisation des valeurs</h4>
<p>Afin de simplifier l'écriture de code, JavaScript alloue la mémoire lors de la déclaration des variables :</p>
<pre class="brush: js">// alloue de la mémoire pour un nombre
var n = 123;
// alloue de la mémoire pour une chaîne de caractères
var s = "azerty";
// alloue de la mémoire pour un objet et les valeurs qu'il contient
var o = {
a: 1,
b: null
};
// alloue de la mémoire pour un tableau et les valeurs qu'il contient
var a = [1, null, "abra"];
// alloue de la mémoire pour une fonction
// une fonction est un objet qui peut être appelé
function f(a) {
return a + 2;
}
// les expressions de fonction allouent aussi de la mémoire
unElement.addEventListener('click', function(){
unElement.style.backgroundColor = 'blue';
}, false);
</pre>
<h4 id="Allocation_par_appels_de_fonctions">Allocation par appels de fonctions</h4>
<p>Certains appels de fonctions entraînent l'allocation mémoire d'un objet.</p>
<pre class="brush: js">// Alloue la mémoire pour un objet date
var d = new Date();
// Alloue de la mémoire pour un objet représentant un élément du DOM
var e = document.createElement('div');
</pre>
<p>Certaines méthodes allouent de la mémoire pour des nouveaux objets ou de nouvelles valeurs.</p>
<pre class="brush: js">var s = "azerty";
var s2 = s.substr(0, 3); // s2 est une nouvelle chaîne de caractères
// Les chaînes étant immuables, JavaScript peut choisir
// de ne pas allouer de mémoire mais seulement
// de stocker l'intervalle [0, 3].
var a = ["ouais ouais", "nan nan"];
var a2 = ["génération", "nan nan"];
var a3 = a.concat(a2);
// nouveau tableau de 4 éléments
// (résultat de la concaténation de a et a2)
</pre>
<h3 id="Utilisation_des_variables">Utilisation des variables</h3>
<p>Utiliser des variables revient à lire et écrire la mémoire allouée. Cela peut être effectué lorsqu'on lit ou modifie la valeur d'une variable ou d'une propriété d'un objet ou encore lorsqu'on passe un argument à une fonction.</p>
<h3 id="Libérer_la_mémoire_qui_n'est_plus_nécessaire">Libérer la mémoire qui n'est plus nécessaire</h3>
<p>La plupart des problèmes concernant la gestion de la mémoire surviennent à cet endroit. Le plus difficile est de savoir « quand » la mémoire allouée n'est plus utilisée. Pour les langages « bas niveau », il faut donc que le développeur détermine quelle partie de la mémoire n'est plus utilisée à tel endroit du code et la libère.</p>
<p>Les interpréteurs des langages de haut niveau intègrent un composant logiciel, appelé « ramasse-miettes » qui a pour but de surveiller l'utilisation de la mémoire afin de déterminer quand une partie de la mémoire allouée n'est plus utilisée afin de la libérer automatiquement. Ce procédé ne peut être qu'une approximation car savoir si tel ou tel fragment de mémoire est nécessaire est un problème <a href="https://fr.wikipedia.org/wiki/D%C3%A9cidabilit%C3%A9">indécidable</a> (autrement dit, ce problème ne peut être résolu par un algorithme).</p>
<h2 id="Le_ramasse-miettes_ou_garbage_collection">Le ramasse-miettes ou <em>garbage collection</em></h2>
<p>Comme on vient de le voir, savoir si de la mémoire peut être libérée demeure un problème indécidable. Les ramasses-miettes ne sont donc que des solutions restreintes pour ce problème. La section qui suit détaille les notions importantes pour comprendre ce mécanisme, ainsi que ses limitations.</p>
<h3 id="Références">Références</h3>
<p>Le concept principal utilisé par les algorithmes de ramasse-miettes est celui de <em>référence</em>. Dans ce contexte, un objet en référence un autre lorsqu'il a accès à lui (implicitement ou explicitement). Ainsi, un objet JavaScript référencera son <a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a> (référence implicite) et ses propriétés (référence explicite).</p>
<p>Dans ce contexte, la notion d'objet s'étend et dépasse celle utilisée pour décrire les objets JavaScript, elle contiendra notamment les portées de fonctions (ou la portée globale).</p>
<h3 id="Compter_les_références">Compter les références</h3>
<p>L'algorithme le plus simple consiste à faire l'équivalence entre « un objet n'est plus nécessaire » et « un objet n'a pas d'objet le référençant ». Ainsi un objet peut être « ramassé » par le ramasse-miettes quand il n'y a plus de références pointant vers lui.</p>
<h4 id="Exemple">Exemple</h4>
<pre class="brush: js">var o = {
a: {
b: 2
}
};
// 2 objets sont créés. L'un est référencé par l'autre en tant que propriété.
// L'autre est référencé car assigné à la variable 'o'.
// Aucun des deux ne peut être ramassé par le ramasse-miettes.
var o2 = o; // la variable 'o2' est le deuxième élément qui
// référence l'objet o
o = 1; // désormais, l'objet qui était dans 'o' possède
// une seule référence de o2 vers lui
var oa = o2.a; // référence la propriété 'a' de l'objet
// cet objet a donc 2 références : une
// par une propriété, l'autre par la variable 'oa'
o2 = "yo"; // L'objet 'o' ne possède plus de références vers lui
// Il peut être ramassé.
// Cependant sa propriété 'a' est toujours référencé.
// La mémoire ne peut donc pas être libérée.
oa = null; // la propriété 'a' ne possède plus de références
// vers elle. L'objet peut être ramassé et la mémoire
// libérée.
</pre>
<h4 id="Une_limitation_les_cycles">Une limitation : les cycles</h4>
<p>Cet algorithme est limité car il ne peut pas gérer les cycles (exemple : A référence B et B référence A, ce qui forme un cycle). Avec les cycles, des objets pourraient très bien ne plus être nécessaires et cependant il serait impossible de les ramasser pour libérer la mémoire en utilisant l'algorithme précédent car chaque objet serait référencé au moins une fois et aucun ne pourrait être « ramassé ». Les références circulaires peuvent parfois entraîner des fuites mémoire.</p>
<pre class="brush: js">function f() {
var o = {};
var o2 = {};
o.a = o2; // o référence o2
o2.a = o; // o2 référence o
return "azerty";
}
f();
</pre>
<h4 id="Exemple_réel">Exemple réel</h4>
<p>Les navigateurs Internet Explorer 6 et 7 utilisent cet algorithme pour gérer les objets du DOM. Certains codes peuvent donc entraîner des fuites de mémoires, en voici un exemple :</p>
<pre class="brush: js">var div;
window.onload = function() {
div = document.getElementById("monElementDiv");
div.referenceCirculaire = div;
div.desDonnees = new Array(10000).join("*");
};
</pre>
<p>Dans cet exemple, l'élément du DOM <code>monElementDiv</code> possède une référence circulaire vers lui-même via la propriété <code>referenceCirculaire</code>. Si la propriété n'est pas retirée ou modifiée de façon explicite, un ramasse-miettes qui compte les références aura toujours au moins une référence comptée, ce qui gardera l'élément DOM en mémoire et ce même s'il a été retiré de l'arbre du DOM. Si l'élément du DOM contient beaucoup de données (ce qui est illustré ici avec la propriétés <code>desDonnées</code>), la mémoire consommée par ces données ne sera jamais libérée.</p>
<h3 id="Algorithme_«_marquer_et_balayer_»_(mark-and-sweep)">Algorithme « marquer et balayer » (<em>mark-and-sweep</em>)</h3>
<p>Cet algorithme réduit la définition « un objet n'est plus nécessaire » à « un objet ne peut être atteint ».</p>
<p>L'utilisation de cet algorithme implique de savoir quels sont les objets racines (en JavaScript, la racine est l'objet global). De façon périodique, le ramasse-miettes commencera par ces racines, listera tous les objets référencés par ces racines, puis les objets référencés par eux etc. Le ramasse-miettes pourra ainsi construire une liste de tous les objets accessibles et collecter ceux qui ne sont plus accessibles.</p>
<p>Cet algorithme est meilleur que le précédent car la proposition « un objet possède 0 référence » implique « un objet ne peut être atteint ». En revanche, la réciproque n'est pas vraie comme nous avons pu le voir avec les cycles.</p>
<p>En 2012, l'ensemble des navigateurs web modernes disposent d'un ramasse-miettes implémentant cet algorithme <em>mark-and-sweep</em>. L'ensemble des améliorations apportées dans ce domaine de JavaScript représentent des améliorations basées sur cet algorithme, ce ne sont pas de nouveaux algorithmes ou une nouvelle définition pour les objets à supprimer.</p>
<h4 id="Les_cycles_ne_posent_plus_problème">Les cycles ne posent plus problème</h4>
<p>Dans l'exemple ci-dessus, après le retour de la fonction, les deux objets ne sont plus référencés par quelque chose d'accessible depuis l'objet global. L'algorithme les marquera donc comme « non-accessibles ».</p>
<h4 id="Limitation_libérer_la_mémoire_manuellement">Limitation : libérer la mémoire manuellement</h4>
<p>On pourrait parfois avoir envie de décider quand libérer la mémoire. En 2019, il n'est pas possible de déclencher le ramasse miettes en JavaScript.</p>
<h2 id="Node.js">Node.js</h2>
<p>Node.js propose certaines options et outils pour configurer et déboguer des problèmes mémoires. Ces fonctionnalités peuvent ne pas être disponibles dans les environnements navigateur.</p>
<h3 id="Options_d'exécution">Options d'exécution</h3>
<p>La quantité de mémoire pour la mémoire du tas (<em>heap</em>) peut être augmentée avec une option :</p>
<pre class="brush: bash">node --max-old-space-size=6000 index.js</pre>
<p>On peut également exposer le ramasse-miettes afin de déboguer des problèmes mémoires. Cela s'active via une option et s'utilise avec le débogueur Chrome :</p>
<pre class="brush: bash">node --expose-gc --inspect index.js</pre>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a class="external" href="https://www.ibm.com/developerworks/web/library/wa-memleak/">Article d'IBM sur les pratiques menant aux fuites mémoires en JavaScript (2007)</a> (en anglais)</li>
<li><a class="external" href="https://msdn.microsoft.com/en-us/magazine/ff728624.aspx">Billet de Kangax sur les méthodes à utiliser pour enregistrer les gestionnaires d'événements et éviter les fuites mémoires (2010)</a> (en anglais)</li>
<li><a href="/fr/docs/Performance">La performance pour les logiciels Mozilla et les modules complémentaires</a></li>
</ul>
|
