From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- "files/es/tools/desempe\303\261o/index.html" | 91 ++++++++++++++ .../es/tools/desempe\303\261o/ui_tour/index.html" | 134 +++++++++++++++++++++ 2 files changed, 225 insertions(+) create mode 100644 "files/es/tools/desempe\303\261o/index.html" create mode 100644 "files/es/tools/desempe\303\261o/ui_tour/index.html" (limited to 'files/es/tools/desempeño') diff --git "a/files/es/tools/desempe\303\261o/index.html" "b/files/es/tools/desempe\303\261o/index.html" new file mode 100644 index 0000000000..9dbf8e643d --- /dev/null +++ "b/files/es/tools/desempe\303\261o/index.html" @@ -0,0 +1,91 @@ +--- +title: Rendimiento +slug: Tools/Desempeño +translation_of: Tools/Performance +--- +

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 vista general de todas las acciones que tu navegador empleó para generar el sitio web así como una gráfica con el tiempo de respuesta de dicha pagina.

+ +

Para examinar con más detalle los aspectos del perfil tienes tres herramientas auxiliares:

+ + + +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

Preámbulo

+ +
+
+
+
UI Tour
+
+

Guía rápida de la interfaz para comenzar a manejar la herramienta de rendimiento.

+
+
+
+ +
+
+
How to
+
Tareas básicas: abrir la herramienta, crear, guardar, cargar y configurar las grabaciones.
+
+
+
+ +
+

Componentes de la herramienta de Rendimiento

+ +
+
+
+
Frame rate
+
Comprender la capacidad de respuesta general de tu sitio.
+
Call Tree
+
Encontrar cuellos de botella en el JavaScript de tu sitio.
+
+
+ +
+
+
Waterfall
+
Comprender el trabajo que el navegador realiza cuando un usuario interactúa con el sitio web.
+
Flame Chart
+
Ver qué funciones de JavaScript se ejecutan , y cuando , en el transcurso de la grabación.
+
 
+
+
+
+ +
+

Escenarios

+ +
+
+
+
Animating CSS properties
+
Utiliza Waterfall para entender cómo el navegador actualiza una página, y cómo las diferentes propiedades CSS pueden afectar al rendimiento.
+
 
+
+
+ +
+
+
Intensive JavaScript
+
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.
+
+
+
+ +

 

+ +
+
+
 
+
+
+ +

 

diff --git "a/files/es/tools/desempe\303\261o/ui_tour/index.html" "b/files/es/tools/desempe\303\261o/ui_tour/index.html" new file mode 100644 index 0000000000..8898abae03 --- /dev/null +++ "b/files/es/tools/desempe\303\261o/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 +--- +

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