Cronograma de Herramientas para desarrolladores: Ahora se proporciona la historia completa

Heather Mahan

El panel Timeline de las Herramientas para desarrolladores siempre fue la mejor primera parada en la ruta hacia la optimización del rendimiento. Esta descripción general centralizada de la actividad de tu app te ayuda a analizar en qué parte del tiempo dedicas la carga, la escritura de secuencias de comandos, el procesamiento y la pintura. Recientemente, actualizamos Timeline con más instrumentación para que puedas tener una vista más detallada del rendimiento de tu app.

Agregamos las siguientes funciones:

Ten en cuenta que el uso de las opciones de captura de Paint que se describen en este artículo genera cierta sobrecarga de rendimiento, por lo que debes activarlas solo cuando quieras.

Generador de perfiles de JavaScript integrado

Si alguna vez exploraste el panel Perfiles, es probable que conozcas el Generador de perfiles de CPU de JavaScript. Esta herramienta mide dónde se invierte el tiempo de ejecución en tus funciones de JavaScript. Al visualizar los perfiles de JavaScript con el gráfico Flame, puedes visualizar el procesamiento de JavaScript con el paso del tiempo.

Ahora, puedes obtener este desglose detallado de la ejecución de JavaScript en el panel Timeline. Si seleccionas la opción de captura JS Profiler, podrás ver las pilas de llamadas de JavaScript en Timeline junto con otros eventos del navegador. Agregar esta función a la línea de tiempo ayuda a optimizar tu flujo de trabajo de depuración. Pero más que eso, te permite ver tu JavaScript en contexto e identificar las partes de tu código que afectan el tiempo de carga y el procesamiento de la página.

Además del generador de perfiles de JavaScript, también integramos una vista de gráfico tipo llama al panel Timeline. Ahora puedes ver la actividad de tu app como la cascada clásica de eventos o como un gráfico tipo llama. El ícono Flame Chart te permite alternar entre estas dos vistas.

Ícono de llama.
Usar la opción de captura del generador de perfiles de JS y la vista de gráfico de llamas para investigar pilas de llamadas en Timeline
Usa la opción de captura del Generador de perfiles de JS y la vista de gráfico tipo llama para investigar pilas de llamadas en el cronograma.

Visor de marcos

El arte de la composición de capas es otro aspecto del navegador que casi no se muestra a los desarrolladores. Cuando se usan con moderación y cuidado, las capas pueden ayudar a evitar costosos volver a pintar y generar grandes mejoras de rendimiento. Sin embargo, a menudo no es obvio predecir cómo el navegador componerá tu contenido. Con la nueva opción de captura Paint de Timeline, puedes visualizar capas compuestas en cada fotograma de una grabación.

Cuando seleccionas una barra de marcos gris sobre el subproceso principal, el panel Layers proporciona un modelo visual de las capas que componen tu app.

Puedes hacer zoom, rotar y arrastrar el modelo de capas para explorar su contenido. Si colocas el cursor sobre una capa, se mostrará su posición actual en la página. Si haces clic con el botón derecho en una capa, podrás ir al nodo correspondiente en el panel Elements. Estas funciones te muestran lo que se ascendió a una capa. Si seleccionas una capa, también puedes ver el motivo por el que se promovió en la fila etiquetada como Razones de composición.

Inspección de una capa de la galería dispersa de polaroids de Codrops para revelar los motivos de la composición del navegador.
Inspeccionar una capa de la Scattered Polaroids Gallery de Codrops para revelar los motivos de composición del navegador

Generador de perfiles de pintura

Por último, pero no menos importante, agregamos el generador de perfiles de pintura para ayudarte a identificar los bloqueos causados por pinturas costosas. Esta función enriquece la función Rutas con más detalles sobre el trabajo que hace Chrome durante los eventos de pintura.

Para comenzar, ahora es más fácil identificar el contenido visual correspondiente a cada evento de pintura. Cuando seleccionas un evento de pintura verde en el cronograma, el panel Details muestra una vista previa de los píxeles reales que se pintaron.

Vista previa de los píxeles que pintó el navegador con la opción Captura de pintura.
Vista previa de los píxeles que pintó el navegador con la opción de captura Paint.

Si realmente quieres profundizar, pasa al panel del Generador de perfiles de pintura. Este generador de perfiles te muestra los comandos de dibujo exactos que el navegador ejecutó para el procesamiento de imagen seleccionado. Para ayudarte a conectar estos comandos nativos con el contenido real de tu app, puedes hacer clic con el botón derecho en una llamada draw* y saltar directamente al nodo correspondiente en el panel Elements.

La relación de las llamadas de dibujo de navegador nativo a los elementos del DOM usando el generador de perfiles de Paint
Cómo relacionar llamadas de dibujo nativos del navegador con elementos del DOM mediante el Generador de perfiles de pintura

El minicronograma en la parte superior del panel te permite reproducir el proceso de pintura y tener una idea de qué operaciones son costosas para el navegador realizar. Las operaciones de dibujo se codifican por color de la siguiente manera: rosa (formas), azul (mapa de bits), verde (texto) y púrpura (varios). La altura de la barra indica la duración de la llamada, por lo que investigar las barras altas puede ayudarte a comprender qué costo de una pintura en particular era.

Perfil y ganancias

Cuando se trata de optimización del rendimiento, conocer el navegador puede ser increíblemente potente. Gracias a que te permiten ver en detalle, estas actualizaciones de Rutas ayudan a aclarar la relación entre tu código y los procesos de renderización de Chrome. Prueba estas opciones nuevas en Timeline y observa lo que las Herramientas para desarrolladores de Chrome pueden hacer para mejorar tu flujo de trabajo de búsqueda de bloqueos.