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
129
130
131
132
133
134
135
|
---
title: Paseo por la interfaz de usuario
slug: Tools/Performance/UI_Tour
translation_of: Tools/Performance/UI_Tour
original_slug: Tools/Desempeño/UI_Tour
---
<p>La interfaz de usuario (UI) de las herramientas de rendimiento, consta de cuatro partes principales:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13220/perf-tool-pieces.png" style="display: block; height: 702px; margin-left: auto; margin-right: auto; width: 1616px;"></p>
<ul>
<li><a href="/es/docs/Tools/Desempeño/UI_Tour#Toolbar">Barra de herramientas (Toolbar)</a></li>
<li><a href="/es/docs/Tools/Desempeño/UI_Tour#Recordings_pane">Lista de grabaciones (Recordings pane)</a></li>
<li><a href="/es/docs/Tools/Desempeño/UI_Tour#Recording_overview">Vista previa de la grabación (Recording overview)</a></li>
<li><a href="/es/docs/Tools/Desempeño/UI_Tour#Details_pane">Ventana de detalles (Details pane)</a>, que puede mostrar:
<ul>
<li><a href="/en-US/docs/Tools/Performance/Waterfall">Vista en cascada (Waterfall)</a></li>
<li><a href="/en-US/docs/Tools/Performance/Call_Tree">Árbol de llamadas (Call Tree)</a></li>
<li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Gráfico de llama(Flame Chart)</a></li>
</ul>
</li>
</ul>
<h2 id="Barra_de_herramientas_(Toolbar)">Barra de herramientas (Toolbar)</h2>
<p>De izquierde a derecha la barra de herramientas contiene los siguientes botones:</p>
<ul>
<li>
<p>Borrar la lista de grabaciones.</p>
</li>
</ul>
<div class="note">
<p><em>Nota: Si haces esto, perderas cualquier grabación que no haya sido guardada.</em></p>
</div>
<ul>
<li>Inicia o detiene una grabación.</li>
<li>Importar una grabación previamente guardada.</li>
<li>Filtra los <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">marcadores</a> que muestra la vista en cascada.</li>
<li>Cambia la vista activa en la <a href="/es/docs/Tools/Desempeño/UI_Tour#Details_pane">ventana de detalles</a>.</li>
<li>Muestra un popup con la configuración.</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: 1672px;"></p>
<h2 id="Lista_de_grabaciones_(Recordings_pane)">Lista de grabaciones (Recordings pane)</h2>
<p>La lista de grabaciones muestra todas las grabaciones activas, incluyendo las realizadas durante la sesion y las que hayas importado.</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>En el hay una grabación seleccionada en todo momento y esta se mostrara en el resto de la herramienta. Para seleccionar una grabación diferente, presiónala en la lista del panel. Para guardarla como un archivo JSON haz click en "Guardar".</p>
<h2 id="Vista_previa_de_la_grabacion_(Recording_overview)">Vista previa de la grabacion (Recording overview)</h2>
<p>Muestra un resumen de toda la grabación, donde el eje-x representa el tiempo.</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>Contiene dos elementos: una vista previa de la vista en cascada y gráfico con el promedio de fotogramas.</p>
<h3 id="Resumen_de_la_vista_en_cascada">Resumen de la vista en cascada</h3>
<p>Nos presenta una versión comprimida de la <a href="/en-US/docs/Tools/Performance/Waterfall">vista en cascada</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>Las operaciones grabadas están codificadas con el mismo <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">esquema de colores empleado para la vista en cascada</a> que se muestra en la ventana de detalles.</p>
<h3 id="Gráfico_con_el_promedio_de_fotogramas">Gráfico con el promedio de fotogramas</h3>
<p>El promedio de fotogramas nos da una idea de como el navegador responde durante la grabación:</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>Puedes consultar la entrada sobre el <a href="/en-US/docs/Tools/Performance/Frame_rate">promedio de fotogramas</a>.</p>
<h3 id="Relacionando_eventos">Relacionando eventos</h3>
<p>Como estos eventos están sincronizados, <span>puedes crear una </span>correlación entre ellos.</p>
<p>Por ejemplo en la captura de pantalla inferior, una larga operación de pintado (<a href="/en-US/docs/Tools/Performance/Waterfall#Markers">representada con una barra verde</a> en el resumen de la vista en cascada) corresponde con una caída en el promedio de fotogramas:</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="Ampliando">Ampliando</h3>
<p>Puedes usar la vista previa para seleccionar un trozo de la grabación para examinarlo con mas detalle. Al hacer esto, la ventana de detalles se actualizara con el contenido marcado. En la captura inferior hemos seleccionado la caída en el promedio de fotogramas y así podemos ver la operación de pintado con mas detalle:</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="Ventana_de_detalles_(Details_pane)">Ventana de detalles (Details pane)</h2>
<p>La ventana de detalles muestra cualquier herramienta seleccionada. Para cambiar entre ellas, usa los botones de la <a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">barra de herramientas</a>.</p>
<h3 id="Vista_en_cascada">Vista en cascada</h3>
<p>La vista en cascada da una vision de que esta haciendo el navegador durante la grabación: ejecutar Javascript, actualizar CSS, actualizar la composición de la pagina y el rendimiento del redibujado. El eje-x representa el tiempo y las operaciones grabadas van apareciendo en forma de cascada, reflejando así la naturaleza que tiene el navegador el ejecutar las tareas en serie.</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>Para aprender mas sobre la <a href="/en-US/docs/Tools/Performance/Waterfall">vista en cascada</a> puedes visitar su entrada.</p>
<h3 id="Árbol_de_llamadas">Árbol de llamadas</h3>
<p>El árbol de llamadas es una muestra del Javascript que se ejecuta en la pagina. Son una serie de muestras del estado del motor de Javascript y registra el stack de código ejecutado en el momento que se toma la muestra. Estadísticamente, el numero de muestras tomadas al ejecutar una función especifica, corresponde con la cantidad de tiempo que el navegador ha empleado para ejecutarlo, así puedes identificar los cuellos de botella en tu código.</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>
Para aprender mas sobre el <a href="/en-US/docs/Tools/Performance/Call_Tree">árbol de llamadas</a> puedes visitar su entrada.</p>
<h3 id="Gráfico_de_llama">Gráfico de llama</h3>
<p>Si el árbol de llamadas te muestra estadísticamente que funciones de tu sitio gastan mas tiempo de ejecución durante la grabación, el gráfico de llama nos indica cualquier stack llamado durante la misma:</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>Para aprender mas sobre el <a href="/en-US/docs/Tools/Performance/Flame_Chart">gráfico de llama</a> puedes visitar su entrada.</p>
<h3 id="Asignaciones">Asignaciones</h3>
<div class="geckoVersionNote">
<p>La vista de Asignaciones es nueva en Firefox 46.</p>
</div>
<p>La vista de Asignaciones es como el árbol de llamadas, pero para las asignaciones: Nos muestra que funciones en tu pagina tienen mas memoria asignada durante el transacurso de la grabación.</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>La vista de Asignaciones solo aparece si haz seleccionado "Grabar Asignaciones" en las opciones de las herramientas de rendimiento antes de hacer una nueva grabación.</p>
<p>{{EmbedYouTube("Le9tTo7bqts")}}</p>
<p>Para aprender mas sobre las <a href="/en-US/docs/Tools/Performance/Allocations">Asignaciones</a> puedes visitar su entrada.</p>
|
