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
|
---
title: Flame Chart
slug: Tools/Performance/Flame_Chart
translation_of: Tools/Performance/Flame_Chart
original_slug: Outils/Performance/Flame_Chart
---
<div>{{ToolsSidebar}}</div><div class="summary">
<p>Le Flame Chart affiche l'état de la pile JavaScript de votre code à chaque milliseconde durant le profil de performance.</p>
<p>Cela permet de savoir exactement quelle fonction s'est exécutée à un moment donné dans l’enregistrement, combien de temps elle a mis, et d'où elle a été appelée.</p>
</div>
<p>L'Arbre d'appel et le Flame Chart sont tous deux utilisés pour analyser les performances du code JavaScript de pages web. Et ils utilisent tous deux les mêmes données : des échantillons de la pile du moteur JavaScript, pris périodiquement durant l'enregistrement.</p>
<p>Cependant, tandis que le Call Tree organise ces données pour mettre en évidence les endroits où le code passe le plus de temps, de manière cohérente à travers tout l'enregistrement, le Flame Chart lui utilise ces données pour afficher où exactement dans l'enregistrement les fonctions s'exécutent. Essentiellement, il affiche l'état de la pile d'appel à n’importe quel point donné de l'enregistrement.</p>
<p>Voici une capture d'écran montrant le Flame Chart pour une section d'un profil :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10989/perf-flame-chart-overview.png" style="display: block; height: 622px; margin-left: auto; margin-right: auto; width: 1676px;"></p>
<p>Tout d'abord, vous pouvez remarquer que dans le <a href="/fr/docs/Tools/Performance/UI_Tour#Recording_overview">panneau de vue globale de l'enregistrement</a>. Ici, une petite partie de l'enregistrement est sélectionné et affiché dans le Flame Chart. Le Flame Chart affiche beaucoup de données, donc pour obtenir des résultats pertinents, il est souvent nécessaire de zoomer.</p>
<p>Dans la vue du Flame Chart, l'axe X représente le temps. La capture d'écran couvre la période de 1435ms à un peu plus de 1465ms. Sur l'axe Y, on trouve les fonctions de la pile d'appel à ce point dans le temps, avec le haut niveau en haut, et les fonctions filles en bas. Les fonctions ont un code couleur pour pouvoir les distinguer facilement.</p>
<p>Cela fournit une façon de savoir à tout moment de l'enregistrement quelles fonctions sont exécutées, quand et pendant combien de temps, et également d'où elles ont été appelées.</p>
<h2 id="Zoomer_et_faire_un_panoramique">Zoomer et faire un panoramique</h2>
<p>Pour travailler efficacement avec le Flame Chart, il est nécessaire de pouvoir naviguer dedans. Il existe deux contrôles principaux pour naviguer dans le Flame Chart :</p>
<table class="standard-table">
<tbody>
<tr>
<td><strong>Zoom </strong>: Augmente/diminue la portion du profil sélectionné qui est affiché dans le Flame Chart</td>
<td>
<p>1) Souris : mollette vers le haut ou vers le bas dans le Flame Chart.</p>
<p>2) Pavé tactile : deux doigts vers le haut ou vers le bas dans le Flame Chart.</p>
</td>
</tr>
<tr>
<td><strong>Déplacement </strong>: Déplace la portion du profil sélectionné qui est affiché dans le Flame Chart</td>
<td>
<p>1) Clic puis glissement de la partie sélectionnée dans le <a href="/fr/docs/Tools/Performance/UI_Tour#Recording_overview">panneau de la vue d'ensemble de l'enregistrement</a>.</p>
<p>2) Clic puis glissement n'importe où dans le Flame Chart (attention, cliquer dans le panneau de vue d'ensemble à l’extérieur de la partie sélectionnée entraînera une nouvelle sélection)</p>
</td>
</tr>
</tbody>
</table>
<p>{{EmbedYouTube("BzfkBRFucp8")}}</p>
<h2 id="Exemple">Exemple</h2>
<p>Afin de voir comment le Flame Chart peut révéler le comportement d'un programme, nous utiliserons cet exemple simple. Nous utilisons le même programme dans la page de <a href="/fr/docs/Tools/Performance/Call_Tree">L'Arbre d'appel</a>. Il s'agit d'un programme qui compare trois algorithmes de tri différents. Il existe une <a href="/fr/docs/Tools/Performance/Examples/Sorting_algorithms_comparison">page séparée</a> qui fournit une vue d'ensemble de la structure du programme.</p>
<p>Nous utiliserons le même profil que celui utilisé sur la page de l'Arbre d'appel. Le graphique d'appel et le nombre d'échantillons associé ressemblent à ceci :</p>
<pre>sortAll() // 8
-> sort() // 37
-> bubbleSort() // 1345
-> swap() // 252
-> selectionSort() // 190
-> swap() // 1
-> quickSort() // 103
-> partition() // 12</pre>
<p>Tout d'abord, sélectionnons toute la partie durant laquelle le programme était actif :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10991/perf-flame-chart-zoomed-out.png" style="display: block; height: 350px; margin-left: auto; margin-right: auto; width: 1212px;"></p>
<p>L'appel<code>sortAll()</code>, tout en haut et coloré en mauve court du début du programme à la fin. En dessous, on trouve en couleur olive les appels que cette fonction fait à <code>sort()</code>. Encore en dessous, comme les dents d'une scie, on trouve les appels à chacun des algorithmes de tri.</p>
<p>Zoomons un peu :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10993/perf-flame-chart-zoom-1.png" style="display: block; height: 350px; margin-left: auto; margin-right: auto; width: 1212px;"></p>
<p>Cette partie dure à peu près 140ms, et montre plus de détails sur les fonctions appelées par <code>sort()</code>. Le code de <code>sort()</code> est celui-ci :</p>
<pre class="brush: js">function sort(unsorted) {
console.log(bubbleSort(unsorted));
console.log(selectionSort(unsorted));
console.log(quickSort(unsorted));
}</pre>
<p>Les boites intitulées "bubb..." et colorées en vert olive sont vraisemblablement des <code>bubbleSort()</code>. Les boites colorées en vert sont vraisemblablement les autres fonctions de tri. Même au premier regard, il parait évident que les boites du tri à bulle sont bien plus grosses (et donc durent plus longtemps) que les autres.</p>
<p>Nous pouvons également voir quelques fonctions appelées par <code>bubbleSort()</code>, en violet.</p>
<p>Zoomons une deuxième fois :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10995/perf-flame-chart-zoom-2.png" style="display: block; height: 348px; margin-left: auto; margin-right: auto; width: 1212px;"></p>
<p>Cette partie dure environ 20ms. Nous pouvons voir que les boites violettes en dessous de <code>bubbleSort()</code> sont les appels à <code>swap()</code>. Si voulions tous les compter, l'Arbre d'appel nous dirait facilement qu'il en existe 253 (le nombre d'échantillons pris dans cette fonction) . Tous les échantillons dans cette portion sont en dessous de <code>bubbleSort()</code>, mais l'on peut voir dans l'arbre d'appel que le profil contient un appel dans <code>selectionSort()</code>.</p>
<p>Nous pouvons également voir que deux des boites vertes correspondent à <code>selectionSort()</code> et <code>quickSort()</code>, mais que les autres boites vertes correspondent à des appels à la plate-forme Gecko. Il est très probable qu'il s’agisse des <code>console.log()</code> dans <code>sort()</code>.</p>
|
