blob: 5aa048c2b02f5a6a850cfe17ba9b96e0aa3291d2 (
plain)
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
|
---
title: Rendimiento
slug: Tools/Performance
translation_of: Tools/Performance
original_slug: Tools/Desempeño
---
<p>La herramienta de Rendimiento te da una visión general de la capacidad de respuesta del sitio que visitas así como de su JavaScript y el modelo de diseño. Con esta herramienta puedes generar un perfil o registro de un sitio web en un período de tiempo. En dicho perfil la herramienta te ofrece una <a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">vista general</a> de todas las acciones que tu navegador empleó para generar el sitio web así como una gráfica con el <a href="/en-US/docs/Tools/Performance/Frame_rate">tiempo de respuesta</a> de dicha pagina.</p>
<p>Para examinar con más detalle los aspectos del perfil tienes tres herramientas auxiliares:</p>
<ul>
<li><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> muestra qué operaciones ejecutó el navegador, tales como el modelo de ejecución empleado, JavaScript, repaints y liberación de memoria.</li>
<li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> muestra en qué funciones de JavaScript se requirió más tiempo del navegador.</li>
<li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> muestra la pila de llamadas de JavaScript a lo largo de la grabación.</li>
</ul>
<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>
<hr>
<h2 id="Preámbulo">Preámbulo</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>Guía rápida de la interfaz para comenzar a manejar la herramienta de rendimiento.</p>
</dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="/en-US/docs/Tools/Performance/How_to">How to</a></dt>
<dd>Tareas básicas: abrir la herramienta, crear, guardar, cargar y configurar las grabaciones.</dd>
</dl>
</div>
</div>
<hr>
<h2 id="Componentes_de_la_herramienta_de_Rendimiento">Componentes de la herramienta de Rendimiento</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>Comprender la capacidad de respuesta general de tu sitio.</dd>
<dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></dt>
<dd>Encontrar cuellos de botella en el JavaScript de tu sitio.</dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt>
<dd>Comprender el trabajo que el navegador realiza cuando un usuario interactúa con el sitio web.</dd>
<dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt>
<dd>Ver qué funciones de JavaScript se ejecutan , y cuando , en el transcurso de la grabación.</dd>
<dd> </dd>
</dl>
</div>
</div>
<hr>
<h2 id="Escenarios">Escenarios</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>Utiliza Waterfall para entender cómo el navegador actualiza una página, y cómo las diferentes propiedades CSS pueden afectar al rendimiento.</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>Utiliza la velocidad de los fotogramas y la herramienta Waterfall para resaltar los problemas de rendimiento provocados por los JavaScript de larga duración y cómo los workers pueden ayudar en esta situación.</dd>
</dl>
</div>
</div>
<p> </p>
<div class="column-half">
<dl>
<dd> </dd>
</dl>
</div>
<p> </p>
|
