Jak zmierzyć wydajność cyklu podsumowania mojej aplikacji AngularJS?

Jaki jest prosty sposób na zmierzenie czasu trwania cyklu podsumowania angularjs? Istnieją różne metody analizy wydajności cyklu podsumowania, jednak każda ma swoje własne pułapki:

• Chrome Profiler: zbyt wiele szczegółów nie rozkłada cyklu podsumowania w łatwy do znalezienia sposób
• Batarang (wtyczka do przeglądarki AngularJS): Zbyt duży narzut, niska częstotliwość odświeżania, eksploduje przy dużych aplikacjach.

... musi być lepszy sposób?! 1?

Oto sekret. W narzędziach Chrome dla programistów uruchom profil procesora. Po zakończeniu przechwytywania u dołu ekranu znajduje się trójkąt w dół obok opcji „Ciężki (oddolny)”. Kliknij trójkąt i wybierz „Flame Chart”. Gdy jesteś w trybie Flame Chart, możesz powiększać i przesuwać, aby zobaczyć cykle podsumowania, czas ich trwania i dokładnie, jakie funkcje są wywoływane. Wykres płomienia jest niezwykle przydatny do śledzenia problemów z ładowaniem stron, problemów z powtarzaniem ng, problemów z cyklem trawienia! Naprawdę nie wiem, jak udało mi się debugować i profilować przed wykresem płomienia. Oto przykład:

Następująca odpowiedź powie ci bezczynną wydajność pętli $ digest, tj. Wydajność podsumowania, gdy żadne z wyrażeń obserwujących się nie zmieni. Jest to przydatne, jeśli aplikacja działa wolno, nawet jeśli widok się nie zmienia. W przypadku bardziej złożonych sytuacji zapoznaj się z odpowiedzią aet.

Wpisz w konsoli:

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

Wynik poda czas trwania cyklu podsumowania w milisekundach. Im mniejsza liczba, tym lepiej.

UWAGA:

Domi zauważył w komentarzach: angular.element(document) niewiele da, jeśli użyjesz ng-appdyrektywy do inicjalizacji. W takim przypadku ng-appzamiast tego pobierz element. Np. Robiącangular.element('#ng-app')

Możesz też spróbować:

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

Oto nowe narzędzie, które znalazłem, które pomaga w tworzeniu profili: Digest-HUD

Możesz także użyć wydajności kątowej

To rozszerzenie zapewnia wykresy monitorowania w czasie rzeczywistym liczby obserwatorów, czasu podsumowania i szybkości podsumowania. Otrzymujesz również rozkład czasu podsumowania, dzięki czemu możesz dostrzec wyjątkowo długi czas podsumowania z bardziej rekurencyjnych paternów, a wszystkie dane w czasie rzeczywistym są powiązane ze zdarzeniami, dzięki czemu możesz określić, które akcje zmieniły wydajność aplikacji. Na koniec możesz określić czas metody usług i policzyć ich wykonanie, aby określić te, które mają większy wpływ na czas działania Twojej aplikacji.

Disclamer: Jestem autorem rozszerzenia

Jedno przydatne narzędzie do monitorowania cyklu podsumowania można znaleźć w doskonałym narzędziu ng-stats autorstwa @kentcdodds . Tworzy taki mały element wizualny i można go nawet wdrożyć za pomocą bookmarkletu. Można go nawet używać wewnątrz ramek iFrame, takich jak jsfiddle.

Niewielkie narzędzie do wyświetlania statystyk dotyczących kątowego podsumowania / zegarków Twojej strony. Ta biblioteka ma obecnie prosty skrypt do tworzenia wykresów (patrz poniżej). Tworzy również moduł o nazwie, angularStatsktóry zawiera dyrektywę o nazwie, angular-stats która może być użyta do umieszczenia statystyk kątowych w określonym miejscu na stronie, które określisz.

Znaleziono pod adresem https://github.com/kentcdodds/ng-stats

Możesz użyć UX Profiler

• Widok transakcji użytkownika, czyli KLIKNIJ i wszystkie działania przez niego spowodowane (inne zdarzenia, XHR, przekroczenia czasu) zgrupowane razem.
• Pomiary czasu (w odczuciu Użytkownika) całej Transakcji Użytkownika i / lub jej części.
• Połączone asynchroniczne śledzenie stosu.
• Focused Profiler - profiluj tylko problematyczne wydarzenie.
• Integracja Angular 1.x.

dla trybu ścisłego, jedno uruchomienie skrótu cucle, uruchom go w konsoli f12 w chrome

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

narzędzia opisane powyżej dały Ci pomysł pomiaru wydajności pętli podsumowującej Większość ważnych punktów dla zwiększenia wydajności cyklu podsumowania to

• Uważnie monitoruj zdarzenia przewijania, aby ukryć wszystkie niewidoczne elementy i
  znacznie zmniejszyć liczbę obserwatorów.

• Miej możliwe do zarządzania cykle podsumowania $ dla wszystkich innych zdarzeń.