Angular se integra con la API de extensibilidad de Chrome DevTools para presentar datos e información específicos del framework directamente en el panel de rendimiento de Chrome DevTools.
Con la integración habilitada, puedes grabar un perfil de rendimiento que contiene dos conjuntos de datos:
- Entradas de rendimiento estándar basadas en la comprensión de Chrome de tu código ejecutándose en un navegador, y
- Entradas específicas de Angular contribuidas por el tiempo de ejecución del framework.
Ambos conjuntos de datos se presentan juntos en la misma pestaña, pero en pistas separadas:
Los datos específicos de Angular se expresan en términos de conceptos del framework (componentes, change detection, hooks de ciclo de vida, etc.) junto con llamadas de funciones y métodos de nivel más bajo capturadas por un navegador. Estos dos conjuntos de datos están correlacionados, y puedes cambiar entre las diferentes vistas y niveles de detalle.
Puedes usar la pista de Angular para entender mejor cómo se ejecuta tu código en el navegador, incluyendo:
- Determinar si un bloque de código dado es parte de la aplicación Angular, o si pertenece a otro script ejecutándose en la misma página.
- Identificar cuellos de botella de rendimiento y atribuirlos a componentes o servicios específicos.
- Obtener una visión más profunda del funcionamiento interno de Angular con un desglose visual de cada ciclo de change detection.
Grabando un perfil
Habilitar integración
Puedes habilitar el perfilado de Angular de dos maneras:
- Ejecutar
ng.enableProfiling()en el panel de consola de Chrome, o - Incluir una llamada a
enableProfiling()en el código de inicio de tu aplicación (importado desde@angular/core).
NOTA: El perfilado de Angular funciona exclusivamente en modo de desarrollo.
Aquí hay un ejemplo de cómo puedes habilitar la integración en el bootstrap de la aplicación para capturar todos los eventos posibles:
import { enableProfiling } from '@angular/core';import { bootstrapApplication } from '@angular/platform-browser';import { MyApp } from './my-app';// Activa el perfilado *antes* de iniciar tu aplicación// para capturar todo el código ejecutado al inicio.enableProfiling();bootstrapApplication(MyApp);Grabar un perfil
Usa el botón Record en el panel de rendimiento de Chrome DevTools:
Consulta la documentación de Chrome DevTools para más detalles sobre la grabación de perfiles.
Interpretando un perfil grabado
Puedes usar la pista personalizada "Angular" para identificar y diagnosticar rápidamente problemas de rendimiento. Las siguientes secciones describen algunos escenarios comunes de perfilado.
Diferenciando entre tu aplicación Angular y otras tareas en la misma página
Como los datos de Angular y Chrome se presentan en pistas separadas pero correlacionadas, puedes ver cuándo se ejecuta el código de la aplicación Angular en oposición a algún otro procesamiento del navegador (típicamente layout y paint) u otros scripts ejecutándose en la misma página (en este caso la pista personalizada de Angular no tiene ningún dato):
Esto te permite determinar si investigaciones posteriores deben enfocarse en el código de la aplicación Angular o en otras partes de tu código base o dependencias.
Codificación por colores
Angular usa colores en el gráfico de llamas para distinguir tipos de tareas:
- 🟦 Azul representa código TypeScript escrito por el desarrollador de la aplicación (por ejemplo: servicios, constructores de componentes y hooks de ciclo de vida, etc.).
- 🟪 Púrpura representa código de plantillas escrito por el desarrollador de la aplicación y transformado por el compilador de Angular.
- 🟩 Verde representa puntos de entrada al código de la aplicación e identifica razones para ejecutar código.
Los siguientes ejemplos ilustran la codificación por colores descrita en varias grabaciones de la vida real.
Ejemplo: Bootstrap de la aplicación
El proceso de bootstrap de la aplicación usualmente consiste en:
- Disparadores marcados en azul, como la llamada a
bootstrapApplication, instanciación del componente raíz, y change detection inicial - Varios servicios de DI instanciados durante el bootstrap, marcados en verde.
Ejemplo: Ejecución de componente
El procesamiento de un componente típicamente se representa como un punto de entrada (azul) seguido de su ejecución de plantilla (púrpura). Una plantilla puede, a su vez, disparar la instanciación de directivas y ejecución de hooks de ciclo de vida (verde):
Ejemplo: Change detection
Un ciclo de change detection usualmente consiste en uno o más pases de sincronización de datos (azul), donde cada pase recorre un subconjunto de componentes.
Con esta visualización de datos, es posible identificar inmediatamente los componentes que estuvieron involucrados en el change detection y cuáles fueron omitidos (típicamente los componentes OnPush que no fueron marcados como dirty).
Adicionalmente, puedes inspeccionar el número de pases de sincronización para un change detection. Tener más de un pase de sincronización sugiere que el estado se actualiza durante el change detection. Debes evitar esto, ya que ralentiza las actualizaciones de la página y puede incluso resultar en bucles infinitos en los peores casos.