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:
- generador de perfiles de JavaScript integrado. (Gráfico tipo llama incluido)
- visor de marcos para ayudarte a visualizar capas compuestas.
- Generador de perfiles de pintura para obtener desgloses detallados de la actividad de pintura del navegador.
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.
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.
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.
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.
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.