Comment mesurer la performance du cycle de digestion de mon application AngularJS?

Quel est un moyen simple de mesurer la durée du cycle de digestion angular? Il existe différentes méthodes pour parsingr les performances du cycle de digestion, mais chacune comporte ses propres parameters:

  • Chrome Profiler: trop de détails, ne décomposent pas le cycle de lecture d’une manière facile à trouver
  • Batarang (plug-in de navigateur AngularJS): Trop de frais généraux, un taux de rafraîchissement lent, explose avec les grandes applications.

… il doit y avoir un meilleur moyen?! 1?

Voici un secret. Dans les outils de développement de chrome, exécutez un profil de processeur. Après avoir cessé de capturer, au bas de l’écran se trouve un sortingangle en bas à côté de “Heavy (Bottom Up)”. Cliquez sur le sortingangle et sélectionnez “Tableau des flammes”. Une fois en mode graphique de flamme, vous pouvez zoomer et effectuer un panoramique pour voir les cycles de digestion, leur durée et les fonctions appelées. Le diagramme de flamme est incroyablement utile pour suivre les problèmes de chargement des pages, les problèmes de performances répétées, les problèmes de cycle de digestion! Je ne sais vraiment pas comment j’ai pu déboguer et profiler avant le tableau des flammes. Voici un exemple:

Tableau des flammes dans les outils de développement Chrome

La réponse suivante vous indiquera les performances inactives de la boucle $ digest, c.-à-d. Les performances de digest quand aucune des expressions de votre montre ne change. Ceci est utile si votre application semble lente même lorsque la vue ne change pas. Pour des situations plus complexes, voir la réponse de aet.


Tapez ce qui suit dans la console:

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

Le résultat vous donnera la durée du cycle de digestion, en millisecondes. Plus le nombre est petit, mieux c’est.


REMARQUE:

Domi a noté dans les commentaires: angular.element(document) ne rapportera pas grand chose si vous avez utilisé la directive ng-app pour l’initialisation. Dans ce cas, récupérez l’élément ng-app place. Par exemple en faisant angular.element('#ng-app')

Vous pouvez également essayer:

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

Voici un nouvel outil que j’ai trouvé qui aide dans le profilage de digestion: Digest-HUD

entrer la description de l'image ici

Vous pouvez également utiliser les performances angulars

Cette extension fournit des graphiques de surveillance en temps réel du nombre d’observateurs, du rythme de digestion et du taux de digestion. Vous obtenez également la dissortingbution temporelle de résumé afin que vous puissiez établir un timing de digestion exceptionnellement long à partir de paternités plus récursives et que toutes les données en temps réel soient liées aux événements afin que vous puissiez déterminer quelles actions ont modifié les performances de l’application. Enfin, vous pouvez chronométrer la méthode des services et compter leur exécution pour déterminer celles qui ont le plus d’impact sur la durée d’exécution de votre application.

Capture d'écran des performances angulaires

Disclamer: Je suis l’auteur de l’extension

Un outil pratique pour garder un œil sur le cycle de digestion peut être trouvé via l’excellent outil ng-stats de @kentcdodds . Il crée un petit élément visuel comme celui-ci et peut même être implémenté via bookmarklet. Il peut même être utilisé à l’intérieur d’iFrames comme jsfiddle.

bon cycle de digestion entrer la description de l'image ici

Peu d’utilité pour afficher les statistiques sur le résumé / montres angulars de votre page. Cette bibliothèque a actuellement un script simple pour produire un graphique (voir ci-dessous). Il crée également un module appelé angularStats qui a une directive appelée angular-stats qui peut être utilisée pour placer des statistiques angulars sur un endroit spécifique de la page que vous spécifiez.

Trouvé à https://github.com/kentcdodds/ng-stats

Vous pouvez utiliser UX Profiler

  • Vue des transactions utilisateur, c.-à-d. CLIC et toute l’activité provoquée par celui-ci (autres événements, XHR, délais d’attente) regroupés.
  • Les mesures de temps (comme l’utilisateur le ressent) de l’ensemble de la transaction utilisateur et / ou de ses parties.
  • Trace de stack asynchrone combinée.
  • Focused Profiler – profiler juste l’événement problématique.
  • Intégration angular 1.x

entrer la description de l'image ici

pour le mode ssortingct, un cycle de digestion est exécuté, lancez-le dans la console f12 en chrome

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

les outils ci-dessus décrivent déjà l’idée de mesurer la performance de la boucle de digestion. Les points les plus importants pour augmenter la performance du cycle de digestion sont:

  • Surveiller de près les événements pour masquer tous les éléments invisibles et
    réduire considérablement le nombre d’observateurs.

  • Avoir des cycles $ digest faciles à gérer pour tous les autres événements.