¿Cómo mido el rendimiento del ciclo de resumen de mi aplicación AngularJS?

¿Cuál es una manera simple de medir la duración del ciclo de resumen angularjs? Existen varios métodos para analizar el rendimiento del ciclo de resumen, sin embargo, cada uno viene con sus propios pitfals:

  • Chrome Profiler: Demasiados detalles, no analiza el ciclo de resumen de una manera fácil de encontrar
  • Batarang (complemento de navegador AngularJS): Demasiada sobrecarga, velocidad de actualización lenta, explota con aplicaciones grandes.

… debe haber una mejor manera?! 1?

Aquí hay un secreto. En las herramientas de desarrollo de Chrome, ejecute un perfil de CPU. Después de que haya detenido la captura, en la parte inferior de la pantalla hay un triángulo hacia abajo junto a “Pesado (Abajo, arriba)”. Haga clic en el triángulo y seleccione “Flame Chart”. Una vez que esté en modo Flame Chart, puede hacer zoom y pan para ver los ciclos de resumen, cuánto tiempo toman y exactamente qué funciones se están llamando. ¡El diagtwig de llama es increíblemente útil para rastrear problemas de carga de página, problemas de rendimiento de repetición ng, problemas de ciclo de digestión! Realmente no sé cómo pude depurar y perfilar antes del Flame Chart. Aquí hay un ejemplo:

Flame Chart en las herramientas de desarrollo de Chrome

La siguiente respuesta le dirá el rendimiento inactivo del bucle $ digest, es decir, el rendimiento del resumen cuando ninguna de sus expresiones de visualización cambia. Esto es útil si su aplicación parece lenta incluso cuando la vista no está cambiando. Para situaciones más complejas, vea la respuesta de aet.


Escriba lo siguiente en la consola:

angular.element(document).injector().invoke(function($rootScope) { var a = performance.now(); $rootScope.$apply(); console.log(performance.now()-a); }) 

El resultado le dará la duración del ciclo de resumen, en milisegundos. Cuanto menor sea el número, mejor.


NOTA:

Domi señaló en los comentarios: angular.element(document) no rendirá mucho si usó la directiva ng-app para la inicialización. En ese caso, obtenga el elemento ng-app lugar. Por ejemplo, haciendo angular.element('#ng-app')

También puedes probar:

 angular.element(document.querySelector('[ng-app]')).injector().invoke(function($rootScope) { var a = performance.now(); $rootScope.$apply(); console.log(performance.now()-a); }) 

Aquí hay una nueva herramienta que encontré que ayuda en el perfilado de resumen: Digest-HUD

enter image description here

También podrías usar el rendimiento angular

Esta extensión proporciona gráficos de monitoreo en tiempo real de la cantidad de observadores, sincronización del resumen y velocidad de resumen. También obtienes la distribución de temporización de resumen para que puedas distinguir tiempos de resumen excepcionalmente largos de patrones más recursivos y todos los datos en tiempo real están vinculados a eventos para que puedas determinar qué acciones cambiaron las actuaciones de la aplicación. Finalmente, puede utilizar el método de tiempo de los servicios y contar su ejecución para determinar los que tienen un mayor impacto en el tiempo de ejecución de su aplicación.

Captura de pantalla de rendimiento angular

Descargo de responsabilidad: soy el autor de la extensión

Una herramienta útil para vigilar el ciclo de digestión se puede encontrar a través de la excelente herramienta ng-stats de @kentcdodds . Crea un pequeño elemento visual como tal, e incluso se puede implementar a través de bookmarklet. Incluso se puede usar dentro de iFrames como jsfiddle.

buen ciclo de digestión enter image description here

Poca utilidad para mostrar estadísticas sobre el resumen / relojes angulares de su página. Esta biblioteca actualmente tiene una secuencia de comandos simple para producir una tabla (ver a continuación). También crea un módulo llamado angularStats que tiene una directiva llamada angular-stats que se puede usar para poner estadísticas angulares en un lugar específico en la página que especifiques.

Se encuentra en https://github.com/kentcdodds/ng-stats

Puedes usar UX Profiler

  • Vista de transacción de usuario, es decir, CLIC y toda la actividad causada por ella (otros eventos, XHR, tiempos de espera) agrupados.
  • Mediciones de tiempo (como lo siente el usuario) de toda la transacción del usuario y / o sus partes.
  • Traza de stack asíncrona combinada.
  • Profiler enfocado – perfil solo el evento problemático.
  • Integración angular 1.x

enter image description here

para modo estricto, una ejecución de digest cucle, ejecutarlo en la consola f12 en cromo

 angular.element(document).injector().invoke(['$rootScope',function($rootScope) { var a = performance.now(); $rootScope.$apply(); return performance.now()-a; }]) 

las herramientas descritas anteriormente ya le dieron la idea de medir el rendimiento del ciclo de digestión. La mayoría de los puntos importantes para boost el rendimiento del ciclo de resumen son

  • Controla los eventos de desplazamiento de cerca para ocultar todos los elementos invisibles y
    reducir en gran medida la cantidad de observadores.

  • Tener ciclos de digest $ manejables para todos los demás eventos.