El panel de cronograma de DevTools siempre ha sido la mejor primera parada en el camino hacia la optimización del rendimiento. Esta descripción general centralizada de la actividad de tu app te ayuda a analizar dónde se gasta el tiempo en la carga, la escritura de secuencias de comandos, la renderización y la pintura. Recientemente, actualizamos la función Ruta de acceso con más instrumentación para que puedas ver una vista más detallada del rendimiento de tu app.
Agregamos las siguientes funciones:
- Generador de perfiles de JavaScript integrado. (se incluye el gráfico tipo llama).
- Visor de marcos para ayudarte a visualizar las capas compuestas
- Generador de perfiles de pintura para 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 una sobrecarga de rendimiento, por lo que debes activarlas solo cuando las necesites.
Generador de perfiles de JavaScript integrado
Si alguna vez exploraste el panel Profiles, es probable que estés familiarizado con el Generador de perfiles de CPU de JavaScript. Esta herramienta mide dónde se gasta el tiempo de ejecución en tus funciones de JavaScript. Cuando ves los perfiles de JavaScript con el gráfico tipo llama, puedes visualizar el procesamiento de JavaScript a lo largo del tiempo.
Ahora, puedes obtener este desglose detallado de la ejecución de JavaScript en el panel Línea de tiempo. 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 la Línea de tiempo ayuda a optimizar tu flujo de trabajo de depuración. Pero, además, te permite ver tu código JavaScript en contexto y, así, identificar las partes del 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 de llama en el panel Cronograma. Ahora puedes ver la actividad de tu app como la cascada de eventos clásica o como un gráfico de llama. El ícono del gráfico de llama te permite alternar entre estas dos vistas.
Visor de fotogramas
El arte de la composición de capas es otro aspecto del navegador que se ocultó en su mayoría a los desarrolladores. Cuando se usan con moderación y cuidado, las capas pueden ayudar a evitar repintados costosos y generar grandes aumentos de rendimiento. Sin embargo, a menudo no es obvio predecir cómo el navegador compondrá tu contenido. Con la nueva opción de captura Pintar de Rutas, puedes visualizar las capas compuestas en cada fotograma de una grabación.
Cuando seleccionas una barra de marco gris sobre el subproceso principal, su panel Capas proporciona un modelo visual de las capas que componen tu app.
Puedes acercar, 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, puedes saltar al nodo correspondiente en el panel Elementos. Estas funciones te muestran lo que se promocionó a una capa. Si seleccionas una capa, también puedes ver por qué se promocionó en la fila etiquetada como Motivos de composición.
Generador de perfiles de pintura
Por último, agregamos el generador de perfiles de pintura para ayudarte a identificar el bloqueo causado por pinturas costosas. Esta función enriquece el cronograma 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 que corresponde a cada evento de pintura. Cuando seleccionas un evento de pintura verde en el cronograma, el panel Detalles muestra una vista previa de los píxeles reales que se pintaron.
Si quieres profundizar, cambia al panel Paint Profiler. Este generador de perfiles te muestra los comandos de dibujo exactos que ejecutó el navegador 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 draw* y saltar directamente al nodo correspondiente en el panel Elements.
La línea de tiempo en miniatura en la parte superior del panel te permite reproducir el proceso de pintura y obtener una idea de qué operaciones son costosas para el navegador. Las operaciones de dibujo se codifican por color de la siguiente manera: rosa (formas), azul (mapa de bits), verde (texto) y morado (misceláneo). La altura de las barras indica la duración de la llamada, por lo que investigar las barras altas puede ayudarte a comprender qué aspecto de una pintura en particular fue costoso.
Crea tu perfil y obtén ganancias.
Cuando se trata de la optimización del rendimiento, el conocimiento del navegador puede ser increíblemente potente. Estas actualizaciones de Rutas de acceso te permiten ver el funcionamiento interno y aclarar la relación entre tu código y los procesos de renderización de Chrome. Prueba estas nuevas opciones en la función Ruta de acceso y descubre lo que las Herramientas para desarrolladores de Chrome pueden hacer para mejorar tu flujo de trabajo de búsqueda de bloqueos.