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
|
---
title: Prestazioni
slug: Tools/Prestazioni
translation_of: Tools/Performance
---
<p>Lo strumento per l'analisi delle prestazioni ti fornisce una panoramica della risposta generale del tuo sito, della prestazione del layout e del Javascript. Con lo strumento per l'analisi delle prestazioni crei una registrazione, o tracci un profilo, del tuo sito in un periodo di tempo. Lo strumento ti mostra poi un <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">resoconto</a> delle cose che il tuo browser stava facendo al fine di rappresentare il tuo sito nel profilo, ed un grafico del frame rate nel profilo.</p>
<p>Hai a disposizione tre sotto-strumenti per esaminare gli aspetti del profilo più dettagliatamente:</p>
<ul>
<li>la <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">cascata</a> mostra le differenti operazioni di cui si occupava il browser, come l'esecuzione del layout, Javascript, ricolorazione, e la <em>garbage collection</em></li>
<li>l' <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Call_Tree">albero delle chiamate</a> mostra le funzioni Javascript nelle quali il browser spende la maggior parte del tempo</li>
<li>il <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Flame_Chart">grafico a fiamma</a> mostra le chiamate Javascript memorizzate lungo il corso della registrazione.</li>
</ul>
<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>
<hr>
<h2 id="Per_cominciare">Per cominciare</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>Per orientarti nell' uso dello strumento d'analisi delle prestazioni, ecco un breve tour della 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>Operazioni basilari: apri lo strumetno, crea, salva, carica e configura le registrazioni</dd>
</dl>
</div>
</div>
<hr>
<h2 id="Componenti_dello_strumento_per_l'_analisi_delle_prestazioni">Componenti dello strumento per l' analisi delle prestazioni</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>Comprendi la risposta generale del tuo sito</dd>
<dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Albero delle chiamate</a></dt>
<dd>Trova gli intoppi nel Javascript del tuo sito.</dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="/en-US/docs/Tools/Performance/Waterfall">Cascata</a></dt>
<dd>Comprendi il lavoro che sta svolgendo il browser quando l' utente interagisce con il tuo sito.</dd>
<dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Grafico a fiamma</a></dt>
<dd>Controlla quali funzioni Javascript sono in esecuzione ed in che momento, durante la registrazione.</dd>
<dd> </dd>
</dl>
</div>
</div>
<hr>
<h2 id="Scenari">Scenari</h2>
<div class="column-container">
<div class="column-half">
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animazione delle proprietà CSS</a></dt>
<dd>Usa la cascata per capire in che modo il browser aggiorna una pagina e come l' animazione di differenti proprietà CSS può intaccare le prestazioni.</dd>
<dd> </dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Javascript intensivo</a></dt>
<dd>Usa gli strumenti Frame rate e Cascata per evidenziare problemi di prestazione dovuti ad un Javascript particolarmente pesante e come l'utilizzo dei <em>worker</em> può essere d' aiuto.</dd>
</dl>
</div>
</div>
<p> </p>
<div class="column-half">
<dl>
<dd> </dd>
</dl>
</div>
<p> </p>
|
