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
|
---
title: Guia da IU (Interface do Utilizador)
slug: Tools/Performance/UI_Tour
translation_of: Tools/Performance/UI_Tour
original_slug: Tools/Performance/Guia_da_IU
---
<div>{{ToolsSidebar}}</div><p>A 'IU - Interface do Utilizador' da ferramenta desempenho consiste em 4 partes principais:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13220/perf-tool-pieces.png" style="display: block; height: 351px; margin-left: auto; margin-right: auto; width: 808px;"></p>
<ul>
<li><a href="/pt-PT/docs/Tools/Performance/Guia_da_IU#Barra_de_Ferramentas">Barra de Ferramentas</a></li>
<li><a href="https://developer.mozilla.org/pt-PT/docs/Tools/Performance/Guia_da_IU#Painel_de_gravações">Painel de gravações</a></li>
<li><a href="https://developer.mozilla.org/pt-PT/docs/Tools/Performance/Guia_da_IU#Resumo_da_gravação">Resumo da gravação</a></li>
<li><a href="https://developer.mozilla.org/pt-PT/docs/Tools/Performance/Guia_da_IU#Painel_de_detalhes">Painel de detalhes</a>, que poderá conter qualquer um de:
<ul>
<li><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></li>
<li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></li>
<li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></li>
</ul>
</li>
</ul>
<h2 id="Barra_de_Ferramentas">Barra de Ferramentas</h2>
<p>A barra de ferramentas contém botões para:</p>
<ul>
<li>iniciar e parar a gravação</li>
<li>importar uma gravação anteriormente guardada</li>
<li>limpar o painel de 'Gravações'. <em>Note que se o fizer, perde quaisquer gravações que não tenha guardado.</em></li>
<li>filtrar os <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">marcadores</a> que são exibidos na bisualização de <em>Waterfall</em></li>
<li>mude a ferramenta ativa no painel de '<a href="/pt-PT/docs/Tools/Performance/Guia_IU#Painel_de_detalhes">Detalhes'</a>.</li>
<li>aceder à janela das 'Definições'</li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/13222/perf-toolbar.png" style="display: block; height: 434px; margin-left: auto; margin-right: auto; width: 836px;"></p>
<h2 id="Painel_de_gravações">Painel de gravações</h2>
<p>The recordings pane lists all the recordings you have loaded, including any you have made in this session and any you have imported.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10917/perf-recordings-pane.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 300px;"></p>
<p>At any given time, one recording is selected, and that recording is displayed in the rest of the tool. To select a different recording, click its entry in the pane. To save the recording as a JSON file click "Save".</p>
<h2 id="Resumo_da_gravação">Resumo da gravação</h2>
<p>This displays an overview of the entire recording, with the x-axis representing time.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10919/perf-overview.png" style="display: block; height: 164px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>It contains two elements: an overview of the Waterfall and a frame rate graph.</p>
<h3 id="Resumo_de_Waterfall">Resumo de Waterfall</h3>
<p>This presents a compressed view of the <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10923/perf-waterfall-overview.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>Recorded operations are color-coded using <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">the same scheme as in the main Waterfall view</a>.</p>
<h3 id="Gráfico_de_taxa_de_imagem">Gráfico de taxa de imagem</h3>
<p>The frame rate gives you an overview of the browser's responsiveness during the recording:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10921/perf-frame-rate.png" style="display: block; height: 88px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>See the separate article on <a href="/en-US/docs/Tools/Performance/Frame_rate">frame rate</a>.</p>
<h3 id="Eventos_dependentes">Eventos dependentes</h3>
<p>Because these elements are synchronized, you can correlate events in one element with events in another.</p>
<p>For example, in the screenshot below a long-running paint operation (<a href="/en-US/docs/Tools/Performance/Waterfall#Markers">shown as a green bar</a> in the waterfall overview) corresponds to a drop in the frame rate:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10925/perf-overview-correlation.png" style="display: block; height: 494px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<h3 id="Zoom">Zoom</h3>
<p>You can use the overview to select a slice of the recording to examine in more detail. Select a slice, and the main view will be updated to contain just the part selected. In the screenshot below we've selected that drop in the frame rate, and can see the long-running paint operation in more detail:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10927/perf-zoomed.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<h2 id="Painel_de_detalhes">Painel de detalhes</h2>
<p>The Details pane shows whichever tool is currently selected. To switch to a different tool, use the buttons in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">Toolbar</a>.</p>
<h3 id="Waterfall">Waterfall</h3>
<p>The Waterfall presents a view of the work the browser is doing during the recording: executing JavaScript, updating the CSS, updating the page layout, and performing repaints. The x-axis represents time, and the recorded operations are laid out as a waterfall, reflecting the serial nature of the browser's execution.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10929/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>To learn much more about the Waterfall, see the separate <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> page.</p>
<h3 id="Call_Tree">Call Tree</h3>
<p>The Call Tree is a sampling profiler for JavaScript running in the page. It periodically samples the state of the JavaScript engine, and records the stack for the code executing at the time the sample was taken. Statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the browser is spending executing it, so you can identify bottlenecks in your code.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10949/perf-call-tree.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 972px;"><br>
To learn much more about the Call Tree, see the separate <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> page.</p>
<h3 id="Flame_Chart">Flame Chart</h3>
<p>If the Call Tree tells you, statistically, which functions your site is spending most time executing across the whole recording, the Flame Chart tells you the call stack at any given point during the recording:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10933/perf-flame-chart.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>To learn much more about the Flame Chart, see the separate <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> page.</p>
<h3 id="Alocações">Alocações</h3>
<div class="geckoVersionNote">
<p>The Allocations view is new in Firefox 46.</p>
</div>
<p>The Allocations view is like the Call Tree view, but for allocations: it shows you which functions in your page are allocating the most memory over the course of the profile.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/12413/allocations-view-1.png" style="display: block; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>The Allocations view only appears if you checked "Record Allocations" in the Performance tool settings, before recording a profile:</p>
<p>{{EmbedYouTube("Le9tTo7bqts")}}</p>
<p>To learn much more about the Allocations view, see the separate <a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a> page.</p>
<p> </p>
|
