La interfaz de usuario (UI) de las herramientas de rendimiento, consta de cuatro partes principales:
De izquierde a derecha la barra de herramientas contiene los siguientes botones:
Borrar la lista de grabaciones.
Nota: Si haces esto, perderas cualquier grabación que no haya sido guardada.
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".
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.
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.
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.
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:
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:
La ventana de detalles muestra cualquier herramienta seleccionada. Para cambiar entre ellas, usa los botones de la barra de herramientas.
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.
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.
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.
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.