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
|
---
title: Performance
slug: Tools/Performance
tags:
- NeedsTranslation
- TopicStub
translation_of: Tools/Performance
original_slug: Narzędzia/Performance
---
<p>The Performance tool gives you insight into your site's general responsiveness, JavaScript and layout performance. With the Performance tool you create a recording, or profile, of your site over a period of time. The tool then shows you an <a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">overview</a> of the things the browser was doing to render your site over the profile, and a graph of the <a href="/en-US/docs/Tools/Performance/Frame_rate">frame rate</a> over the profile.</p>
<p>You get four sub-tools to examine aspects of the profile in more detail:</p>
<ul>
<li>the <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> shows the different operations the browser was performing, such as executing layout, JavaScript, repaints, and garbage collection</li>
<li>the <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> shows the JavaScript functions in which the browser spent most of its time</li>
<li>the <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> shows the JavaScript call stack over the course of the recording</li>
<li>the <a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a> view shows the heap allocations made by your code over the course of the recording. This view only appears if you checked "Record Allocations" in the Performance tool settings.</li>
</ul>
<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>
<hr>
<h2 id="Getting_started">Getting started</h2>
<div class="column-container">
<div class="column-half">
<dl>
<dt><a href="/en-US/docs/Tools/Performance/UI_Tour">UI Tour</a></dt>
<dd>
<p>To find your way around the Performance tool, here's a quick tour of the UI.</p>
</dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="/en-US/docs/Tools/Performance/How_to">How to</a></dt>
<dd>Basic tasks: open the tool, create, save, load, and configure recordings</dd>
</dl>
</div>
</div>
<hr>
<h2 id="Components_of_the_Performance_tool">Components of the Performance tool</h2>
<div class="column-container">
<div class="column-half">
<dl>
<dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate</a></dt>
<dd>Understand your site's overall responsiveness.</dd>
<dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></dt>
<dd>Find bottlenecks in your site's JavaScript.</dd>
<dt><a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a></dt>
<dd>See the allocations made by your code over the course of the recording.</dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt>
<dd>Understand the work the browser's doing as the user interacts with your site.</dd>
<dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt>
<dd>See which JavaScript functions are executing, and when, over the course of the recording.</dd>
<dd> </dd>
</dl>
</div>
</div>
<hr>
<h2 id="Scenarios">Scenarios</h2>
<div class="column-container">
<div class="column-half">
<dl>
<dt><a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animating CSS properties</a></dt>
<dd>Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.</dd>
<dd> </dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript</a></dt>
<dd>Uses the frame rate and Waterfall tools to highlight performance problems caused by long-running JavaScript, and how using workers can help in this situation.</dd>
</dl>
</div>
</div>
<p> </p>
<div class="column-half">
<dl>
<dd> </dd>
</dl>
</div>
<p> </p>
|
