El panel Timeline de Herramientas para desarrolladores siempre ha sido 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 dónde se invierte el tiempo de carga, escritura de secuencias de comandos, renderización y pintura. Recientemente, actualizamos Rutas con más instrumentación para que puedas obtener 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)
- visualizador de marcos para ayudarte a visualizar las 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, así que actívalas solo cuando las desees.
Generador de perfiles de JavaScript integrado
Si alguna vez hiciste una búsqueda en el panel Profiles, 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 ver los perfiles de JavaScript con Flame Chart, puedes visualizar tu procesamiento de JavaScript a lo largo del tiempo.
Ahora, puedes obtener este desglose detallado de tu ejecución de JavaScript en el panel Timeline. Si seleccionas la opción de captura del generador de perfiles de JS, puedes ver tus pilas de llamadas de JavaScript en el cronograma, junto con otros eventos del navegador. Agregar esta función a Rutas 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 la renderización de la página.
Además del generador de perfiles de JavaScript, también integramos una vista de gráfico tipo llama en el panel Timeline. Ahora puedes ver la actividad de tu app como la clásica cascada de eventos o como un gráfico tipo llama. El ícono de Flame Chart te permite alternar entre estas dos vistas.
Visualizador de marcos
El arte de la composición de capas es otro aspecto del navegador que no se muestra a los desarrolladores en su mayoría. Cuando se usan con moderación y cuidado, las capas pueden ayudar a evitar costosas repeticiones de pintura y generar grandes mejoras en el rendimiento. Pero a menudo no es obvio predecir cómo el navegador compone el contenido. Con la nueva opción de captura Paint de Rutas, puedes visualizar capas compuestas en cada fotograma de una grabación.
Cuando seleccionas una barra de marcos gris sobre el Subproceso principal, el panel Capas 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 saltar al nodo correspondiente en el panel Elements. Estas funciones muestran lo que se promovió a una capa. Si seleccionas una capa, también puedes ver por qué se promocionó en la fila etiquetada Motivos 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 bloqueos causados por pinturas costosas. Esta función enriquece la función Rutas con más detalles sobre el trabajo que realiza Chrome durante los eventos de pintura.
Para empezar, 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 deseas profundizar, cambia al panel Paint Profiler. Este generador de perfiles te muestra los comandos de dibujo exactos que el navegador ejecutó para la pintura seleccionada. 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 de 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. Las operaciones de dibujo tienen el siguiente código de color: 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é aspectos de una pintura en particular te resultaron costosos.
Perfil y ganancias
Cuando se trata de optimizar el rendimiento, el conocimiento del navegador puede ser increíblemente potente. Dado que te brindan información detallada, estas actualizaciones de Rutas ayudan a aclarar la relación entre tu código y los procesos de renderización de Chrome. Prueba estas nuevas opciones en Rutas y descubre lo que las Herramientas para desarrolladores de Chrome pueden hacer para mejorar tu flujo de trabajo de búsqueda de bloqueos.