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

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

• Chrome Profiler: demasiados detalles, no desglosa el ciclo de resumen de una manera fácil de encontrar
• Batarang (complemento del navegador AngularJS): demasiada sobrecarga, frecuencia de actualización lenta, explota con aplicaciones grandes.

... debe haber una mejor manera?! 1?

He aquí un secreto. En las herramientas de desarrollo de Chrome, ejecute un perfil de CPU. Una vez que haya dejado de capturar, en la parte inferior de la pantalla hay un triángulo hacia abajo junto a "Heavy (Bottom Up)". Haga clic en el triángulo y seleccione "Gráfico de llamas". Una vez que esté en el modo Flame Chart, puede hacer zoom y desplazarse para ver los ciclos de resumen, cuánto tardan y exactamente qué funciones se están llamando. Flame Chart es increíblemente útil para rastrear problemas de carga de páginas, problemas de rendimiento de repetición ng, problemas de ciclo de digestión. Realmente no sé cómo pude depurar y crear un perfil antes de Flame Chart. Aquí hay un ejemplo:

La siguiente respuesta le dirá el rendimiento inactivo del bucle $ digest, es decir, el rendimiento de digest cuando ninguna de las expresiones de su reloj cambia. Esto es útil si su aplicación parece lenta incluso cuando la vista no cambia. Para situaciones más complejas, consulte 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 digestión, 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 ng-appdirectiva para la inicialización. En ese caso, obtenga el ng-appelemento en su lugar. Ej. Haciendoangular.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 a digerir los perfiles: Digest-HUD

También puede usar rendimiento angular

Esta extensión proporciona gráficos de monitoreo en tiempo real del número de observadores, tiempo de resumen y tasa de resumen. También obtiene la distribución de tiempo de resumen para que pueda distinguir tiempos de resumen excepcionalmente largos a partir de patrones más recursivos y todos los datos en tiempo real están vinculados a eventos para que pueda determinar qué acciones cambiaron el rendimiento de la aplicación. Finalmente, puede cronometrar el método de los servicios y contar su ejecución para determinar cuáles tienen el mayor impacto en el tiempo de ejecución de su aplicación.

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

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

Poca utilidad para mostrar estadísticas sobre el resumen angular / relojes de su página. Esta biblioteca tiene actualmente un script simple para producir un gráfico (ver más abajo). También crea un módulo llamado angularStatsque tiene una directiva llamada angular-stats que se puede usar para colocar estadísticas angulares en un lugar específico de la página que especifique.

Encontrado en https://github.com/kentcdodds/ng-stats

Puedes usar UX Profiler

• Vista de transacciones de usuario, es decir, CLIC y toda la actividad causada por ella (otros eventos, XHR, tiempos de espera) agrupados.
• Mediciones de tiempo (como el Usuario lo siente) de toda la Transacción del Usuario y / o sus partes.
• Seguimiento de pila asincrónico combinado.
• Perfilador enfocado: perfile solo el evento problemático.
• Integración angular 1.x

para el modo estricto, una ejecución de digest cucle, ejecútelo en la consola f12 en chrome

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 resumen Los puntos más importantes para aumentar el rendimiento del ciclo de resumen son

• Supervise de cerca los eventos de desplazamiento para ocultar todos los elementos invisibles y
  reducir en gran medida el número de observadores.

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