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
|
---
title: Allocations
slug: Tools/Performance/Allocations
translation_of: Tools/Performance/Allocations
original_slug: Outils/Performance/Allocations
---
<div>{{ToolsSidebar}}</div><div class="summary">
<p>La vue Allocations de l'outil Performance affiche quelles fonctions dans une page web allouent le plus de mémoire durant le profil.</p>
<p>C'est important pour la performance, car allouer beaucoup de mémoire ou faire beaucoup d'allocations peut activer le <a href="/fr/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">ramasse-miette</a> (garabage collector). Celui-ci peut affecter la réactivité de la page.</p>
</div>
<div class="geckoVersionNote">
<p>La vue Allocations est une des nouveautés de Firefox 46.</p>
</div>
<p>Pour activer la vue Allocations, il faut activer l'option "Enregistrer les Allocations" dans les options de l'outil Performance, <em>avant</em> d'enregister un profil. Il faut ensuite <a href="/fr/docs/Tools/Performance/How_to#Record_a_profile">enregistrer un profil</a>, un nouvel onglet nommé "Allocations" apparaitra alors dans la barre d'outils :</p>
<p>{{EmbedYouTube("Le9tTo7bqts")}}</p>
<h2 id="Anatomie_de_la_vue_allocations">Anatomie de la vue allocations</h2>
<p>La vue allocations ressemble à ceci :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/12393/allocations-view-1.png" style="display: block; height: 156px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>Cette vue fait périodiquement des échantillons des allocations qui sont faites durant l'enregistrement. Chaque ligne représente une fonction pour laquelle au moins un échantillon d'allocation a été pris durant l'enregistrement.</p>
<p>La vue inclut les colonnes suivantes :</p>
<ul>
<li>Self Count: Le nombre d'échantillons d'allocations qui ont été prises dans cette fonction (affiché également en pourcentage du total)</li>
<li>Self Bytes: Le nombre total d'octets qui ont été alloués dans les échantillons d'allocations dans cette fonction (affiché également en pourcentage du total)</li>
</ul>
<p>Les lignes sont triées par la colonne "Self Bytes".</p>
<p>Anisi dans l'exemple ci-dessus :</p>
<ul>
<li>8904 échantillons ont été pris dans la fonction <code>signalLater()</code>, ce qui représente 28.57% du nombre total d'échantillons pris.</li>
<li>Ces échantillons ont alloué 1102888 octets, ce qui représente 30.01% de la taille totale de mémoire alloué par tous les échantillons.</li>
</ul>
<p>À côté de chaque nom de fonction, se trouve une flèche de développement. Cliquer sur celle-ci affichera l'endroit d'où la fonction a été appelée :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/12397/allocations-view-2.png" style="display: block; height: 155px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>Ici, il est possible de voir que <code>signalLater()</code> a été appelée depuis deux endroits :<code> removeInner()</code> et <code>setSelectionInner()</code>. Il est ainsi possible de remonter l'arbre d'appel et de mieux comprendre le contexte de ces allocations.</p>
<h3 id="Self_Cost_et_Total_Cost">Self Cost et Total Cost</h3>
<ul>
</ul>
<p>Les colonnes de coût sont séparées en "Self" et en "Total". La colonne "Self" correspond aux échantillons pris seulement dans cette fonction. La colonne "Total" correspond aux échantillons pris dans cette fonction ou dans les fonctions appelées par cette fonction. Au premier niveau, ces deux colones sont les mêmes, vu que la vue représente les dernières fonctions (il s'agit d'une vue inversée de l'arbre d'appel). Mais, si l'on remonte l'arbre en développant les lignes, alors la différence devient visible.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/12397/allocations-view-2.png" style="display: block; height: 155px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>Ici, 8904 échantillons ont été pris dans <code>signalLater()</code>. Mais <code>signalLater()</code> a été appelé depuis deux endroits : <code>removeInner()</code> et <code>setSelectionInner()</code>. Mais ces deux fonctions ont 0 en Self Count, ce qui veut dire qu'aucune allocation n'a été faite depuis ces fonctions. Cependant<code> removeInner()</code> a 8901 en Total Count, tandis que <code>setSelectionInner()</code> a seulement 3 en Total Count. Cela révèle que sur les 8904 allocations faites dans <code>signalLater()</code>, toutes sauf trois proviennent de la branche <code>removeInner()</code>.</p>
<h2 id="Allocations_et_garbage_collection">Allocations et garbage collection</h2>
<p>Bien sûr, en savoir plus sur l'utilisation mémoire d'un site est très utile. Cependant la connexion principale entre la réactivité d'un site et le profil d'allocation réside dans le coût de la garbage collection (GC) (ramasse-miette).</p>
<p>Dans un langage à ramasse miette comme JavaScript, le runtime a périodiquement besoin de parcourir la heap à la recherche d'objets qui ne sont plus <a href="/fr/docs/Tools/Memory/Dominators#Reachability">accessibles</a>, pour libérer l'espace mémoire qu'ils occupent. Lors du passage du ramasse-miette, le moteur JavaScript doit être mis en pause, le programme est donc suspendu et ne répondra pas.</p>
<p>Pour réduire l'impact de ce phénomène sur la réactivité des sites, <a href="/fr/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> (le moteur JavaScript de Firefox) possède un ramasse-miette incrémental. Celui-ci procède par petites étapes, lassant le programme tourner entre chaque incrémentation. Quelques fois cependant le moteur a besoin de réaliser un passage complet non incrémental et le programme doit alors attendre la fin du nettoyage.</p>
<p>Les passages du ramasse-miette sont affichés en rouge dans la vue <a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a>, et sont des véritables points noirs pour la réactivité, ils peuvent en effet prendre jusqu'a des centaines de millisecondes :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/12399/allocations-view-long-gc.png" style="display: block; height: 160px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>Que faire en cas de passage intempestif du ramasse-miette ? SpiderMonkey utilise un <a href="https://dxr.mozilla.org/mozilla-central/rev/584870f1cbc5d060a57e147ce249f736956e2b62/js/src/gc/GCRuntime.h#192">ensemble complexe d'heuristiques</a> pour déterminer quand et quel type de passage de ramasse-miette est nécessaire.</p>
<p>En général, cependant :<em> "l'allocation pressure" - allouer beaucoup de mémoire ou allouer de la mémoire a haute fréquence - tend a augmenter la probabilité de SpiderMonkey à ordonner le passage du ramasse-miette, et tend également a faire plus de passages non incrémentaux.</em></p>
<p>Si un passage du ramasse-miette a été causé par de "l'allocation pressure", alors le panneau droit du marqueur dans la vue Chronologie contient un lien nommé "Show allocation triggers". Cliquer sur celui-ci passe la vue en vue allocations et sélectionne la période de temps entre la fin du dernier passage du ramasse-miette et le début de celui qui a été cliqué. Cela révèle toute les allocations qui ont amené à déclencher ce passage du ramasse-miette :</p>
<p>{{EmbedYouTube("tO5ovD9Jw4k")}}</p>
<p>Si vous rencontrez ces problèmes, il est conseillé d'essayer de réduire la taille de vos allocations. Par exemple :</p>
<ul>
<li>Est-il possible d'allouer de la mémoire en "<a href="https://en.wikipedia.org/wiki/Lazy_loading">lazy load</a>", lorsqu'elle est nécessaire plutôt que de l'allouer en avance ?</li>
<li>Si vous allouez de la mémoire dans une boucle, pouvez-vous réutiliser une seule allocation dans chaque itération ?</li>
</ul>
|
