From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- .../es/tools/desempe\303\261o/ui_tour/index.html" | 134 --------------------- 1 file changed, 134 deletions(-) delete mode 100644 "files/es/tools/desempe\303\261o/ui_tour/index.html" (limited to 'files/es/tools/desempeño/ui_tour/index.html') diff --git "a/files/es/tools/desempe\303\261o/ui_tour/index.html" "b/files/es/tools/desempe\303\261o/ui_tour/index.html" deleted file mode 100644 index 8898abae03..0000000000 --- "a/files/es/tools/desempe\303\261o/ui_tour/index.html" +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Paseo por la interfaz de usuario -slug: Tools/Desempeño/UI_Tour -translation_of: Tools/Performance/UI_Tour ---- -

La interfaz de usuario (UI) de las herramientas de rendimiento, consta de cuatro partes principales:

- -

- - - -

Barra de herramientas (Toolbar)

- -

De izquierde a derecha la barra de herramientas contiene los siguientes botones:

- - - -
-

Nota: Si haces esto, perderas cualquier grabación que no haya sido guardada.

-
- - - -

- -

Lista de grabaciones (Recordings pane)

- -

La lista de grabaciones muestra todas las grabaciones activas, incluyendo las realizadas durante la sesion y las que hayas importado.

- -

- -

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".

- -

Vista previa de la grabacion (Recording overview)

- -

Muestra un resumen de toda la grabación, donde el eje-x representa el tiempo.

- -

- -

Contiene dos elementos: una vista previa de la vista en cascada y gráfico con el promedio de fotogramas.

- -

Resumen de la vista en cascada

- -

Nos presenta una versión comprimida de la vista en cascada:

- -

- -

Las operaciones grabadas están codificadas con el mismo esquema de colores empleado para la vista en cascada que se muestra en la ventana de detalles.

- -

Gráfico con el promedio de fotogramas

- -

El promedio de fotogramas nos da una idea de como el navegador responde durante la grabación:

- -

- -

Puedes consultar la entrada sobre el promedio de fotogramas.

- -

Relacionando eventos

- -

Como estos eventos están sincronizados, puedes crear una correlación entre ellos.

- -

Por ejemplo en la captura de pantalla inferior, una larga operación de pintado (representada con una barra verde en el resumen de la vista en cascada) corresponde con una caída en el promedio de fotogramas:

- -

- -

Ampliando

- -

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:

- -

- -

Ventana de detalles (Details pane)

- -

La ventana de detalles muestra cualquier herramienta seleccionada. Para cambiar entre ellas, usa los botones de la barra de herramientas.

- -

Vista en cascada

- -

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.

- -

- -

Para aprender mas sobre la vista en cascada puedes visitar su entrada.

- -

Árbol de llamadas

- -

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.

- -


- Para aprender mas sobre el árbol de llamadas puedes visitar su entrada.

- -

Gráfico de llama

- -

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:

- -

- -

Para aprender mas sobre el gráfico de llama puedes visitar su entrada.

- -

Asignaciones

- -
-

La vista de Asignaciones es nueva en Firefox 46.

-
- -

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.

- -

- -

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.

- -

{{EmbedYouTube("Le9tTo7bqts")}}

- -

Para aprender mas sobre las Asignaciones puedes visitar su entrada.

-- cgit v1.2.3-54-g00ecf