¿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:
... debe haber una mejor manera?! 1?
Respuestas:
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ó lang-appdirectiva para la inicialización. En ese caso, obtenga elng-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);
})
The listener is called only when the value from the current watchExpression and the previous call to watchExpression are not equal. Su código no tiene en cuenta a ningún oyente. Y angular crea muchos oyentes. Nunca llamarías $apply()cuando nada ha cambiado, por lo que tus resultados solo cuentan la mitad de la historia. Dependiendo de las circunstancias puede ser la menos interesante;)
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. Por ejemplo, haciendo angular.element('#ng-app')...
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 llamadaangular-statsque 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
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.