Jak zmierzyć wydajność mojego skrótu do aplikacji AngularJS?

Question

Jaki jest prosty sposób pomiaru czasu trwania cyklu trawienia angularjs? Istnieją różne metody, aby analizować skuteczność cyklu strawienia, jednak każdy przychodzi z własnymi pitfals:

• Chrome Profiler: Zbyt wiele szczegółów, nie rozbić cykl digest w łatwym do znalezienia sposobu
• Batarang (wtyczka przeglądarki AngularJS): Zbyt dużo narzutów, wolna częstotliwość odświeżania, wybucha w przypadku dużych aplikacji.

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

Answer 1

Oto sekret. W narzędziach Chrome Chrome uruchom profil cpu. Po zatrzymaniu przechwytywania u dołu ekranu znajduje się trójkąt w dół obok "Ciężki (od dołu)". Kliknij trójkąt i wybierz "Wykres płomienia". Po przejściu do trybu wykresu płomienia można powiększać i przesuwać, aby zobaczyć cykle trawienia, czas ich trwania i dokładnie to, jakie funkcje są wywoływane. Wykres Flame jest tak niesamowicie przydatny do śledzenia problemów z ładowaniem strony, problemów z wydajnością ng-repeat, problemów z cyklem trawienia! Naprawdę nie wiem, jak mogłem debugować i profilować przed tablicą Flame Chart. Oto przykład:

Answer 2

Następująca odpowiedź powie Ci, że wykonanie pętli $ digest, tj. Wydajność skracania, gdy żadne z twoich wyrażeń zegarka nie zmieni się. Jest to pomocne, jeśli twoja aplikacja wydaje się powolna, nawet jeśli widok się nie zmienia. Aby uzyskać bardziej złożone sytuacje, zobacz odpowiedź Aet.

---

Wpisz następujące do konsoli:

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

Wynik daje czas trwania cyklu strawienia, w milisekundach. Im mniejsza liczba, tym lepiej.

---

UWAGA:

Domi zauważyć w komentarzach: angular.element(document) nie przyniesie wiele, jeśli stosowane dyrektywy ng-app inicjalizacji. W takim przypadku pobierz element ng-app. Na przykład. wykonując angular.element('#ng-app')

Można też spróbować:

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

Answer 3

tutaj jest nowym narzędziem znalazłem, który pomaga w trawieniu profilowanie: Digest-HUD

Answer 4

Można również użyć angular-performance

ten rozszerzenie zapewnia wykresy monitorowania w czasie rzeczywistym liczby obserwatorów , digest timin gi szybkość trawienia.Otrzymasz również rozkład czasu rozkładu, dzięki któremu można wyliczyć bardzo długie przedziały czasowe z bardziej rekursywnych danych, a wszystkie dane w czasie rzeczywistym są powiązane z wydarzeniami , dzięki czemu można określić, które akcje zmieniły wydajność aplikacji. Na koniec możesz skorzystać z metody usług czasu i policzyć ich wykonanie w celu określenia tych, które mają większy wpływ na czas działania aplikacji.

Disclamer: Jestem autorem rozszerzenia

Answer 5

Można użyć UX Profiler

• użytkownika pogląd transakcji, tj KLIKNIJ i cała aktywność spowodowana przez nią (inne imprezy , XHRs, Timeout) zgrupowane razem.
• Pomiary czasu (zgodnie z odczuciami użytkownika) dla całej Transakcji użytkownika i/lub jej części.
• Połączone śledzenie stosu asynchronicznego.
• Skoncentrowany profil - profil tylko problematyczne wydarzenie.
• Integracja kątowa 1.x.

Answer 6

narzędzia powyżej opisują już dał ci pomysł mierzenia wydajności strawienia pętli Najwięcej punktów importants dla zwiększenia wydajności strawić cyklu są

• monitora ściśle przewinąć zdarzenia aby ukryć wszystkie niewidoczne elementy i znacznie zmniejszyć liczbę obserwatorów.

• Mieć wykonalne cykle $ digest dla wszystkich innych zdarzeń.

Answer 7

w trybie ścisłym, jeden bieg strawienia cucle, uruchomić go w konsoli f12 w chromie

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

Answer 8

jednym poręcznym narzędziem oko na cykl trawienia można znaleźć poprzez doskonałą ng-stats tool przez @kentcdodds. Tworzy to mały element wizualny, a nawet może być zaimplementowany za pomocą skryptozakładki. Może być nawet używany wewnątrz iFrame, takich jak jsfiddle.

Mała narzędzie do wyświetlenia statystyk na temat strony za strawionych kątowych/zegarki. Ta biblioteka ma obecnie prosty skrypt do wykonania , który tworzy wykres (patrz poniżej). Tworzy także moduł o nazwie angularStats, który ma dyrektywę o nazwie angular-stats , która może być używana do umieszczania statystyk kątowych w określonym miejscu na określonej stronie.

Znaleziony w https://github.com/kentcdodds/ng-stats