diff options
Diffstat (limited to 'files/es/tools/performance')
| -rw-r--r-- | files/es/tools/performance/index.html | 91 | ||||
| -rw-r--r-- | files/es/tools/performance/ui_tour/index.html | 134 |
2 files changed, 225 insertions, 0 deletions
diff --git a/files/es/tools/performance/index.html b/files/es/tools/performance/index.html new file mode 100644 index 0000000000..9dbf8e643d --- /dev/null +++ b/files/es/tools/performance/index.html @@ -0,0 +1,91 @@ +--- +title: Rendimiento +slug: Tools/Desempeño +translation_of: Tools/Performance +--- +<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> diff --git a/files/es/tools/performance/ui_tour/index.html b/files/es/tools/performance/ui_tour/index.html new file mode 100644 index 0000000000..8898abae03 --- /dev/null +++ b/files/es/tools/performance/ui_tour/index.html @@ -0,0 +1,134 @@ +--- +title: Paseo por la interfaz de usuario +slug: Tools/Desempeño/UI_Tour +translation_of: Tools/Performance/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> |