Was ist ein einfacher Weg, um die Dauer des Winkel-Verdauungszyklus zu messen? Es gibt verschiedene Methoden zur Analyse der Leistung des Verdauungszyklus, jedoch hat jede ihre eigenen Pitfals:
... muss es einen besseren Weg geben ?! 1?
Antworten:
Hier ist ein Geheimnis. Führen Sie in den Chrome Dev Tools ein CPU-Profil aus. Nachdem Sie die Aufnahme beendet haben, befindet sich am unteren Bildschirmrand ein Dreieck nach unten neben "Schwer (von unten nach oben)". Klicken Sie auf das Dreieck und wählen Sie "Flame Chart". Sobald Sie sich im Flammendiagrammmodus befinden, können Sie zoomen und schwenken, um die Digest-Zyklen anzuzeigen, wie lange sie dauern und welche Funktionen genau aufgerufen werden. Das Flammendiagramm ist unglaublich nützlich, um Probleme beim Laden von Seiten, Probleme bei der Wiederholungsleistung und Probleme beim Digest-Zyklus aufzuspüren! Ich weiß wirklich nicht, wie ich vor dem Flame Chart debuggen und profilieren konnte. Hier ist ein Beispiel:
Die folgende Antwort zeigt Ihnen die Leerlaufleistung der $ Digest-Schleife, dh die Leistung des Digests, wenn sich keiner Ihrer Überwachungsausdrücke ändert. Dies ist hilfreich, wenn Ihre Anwendung auch dann träge erscheint, wenn sich die Ansicht nicht ändert. Für komplexere Situationen siehe die Antwort von aet.
Geben Sie Folgendes in die Konsole ein:
angular.element(document).injector().invoke(function($rootScope) {
var a = performance.now();
$rootScope.$apply();
console.log(performance.now()-a);
})Das Ergebnis gibt Ihnen die Dauer des Digest-Zyklus in Millisekunden an. Je kleiner die Zahl, desto besser.
HINWEIS:
Domi in den Kommentaren bemerkt:
angular.element(document)wird nicht viel bringen, wenn Sie dieng-appDirektive für die Initialisierung verwendet haben. In diesem Fall holen Sie sichng-appstattdessen das Element. ZB indem du es tustangular.element('#ng-app')
Sie können auch versuchen:
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. Ihr Code berücksichtigt keine Listener. Und eckig schafft viele Zuhörer. Sie würden niemals anrufen, $apply()wenn sich nichts geändert hat, daher erzählen Ihre Ergebnisse nur die Hälfte der Geschichte. Abhängig von den Umständen kann es das weniger interessante sein;)
angular.element(document)wird nicht viel bringen, wenn Sie die ng-appDirektive für die Initialisierung verwendet haben. In diesem Fall holen Sie sich ng-appstattdessen das Element. ZB durch angular.element('#ng-app')...
Hier ist ein neues Tool, das mir bei der Erstellung von Digest-Profilen hilft: Digest-HUD
Sie können auch die Winkelleistung verwenden
Diese Erweiterung bietet Echtzeit-Überwachungsdiagramme für die Anzahl der Beobachter, das Digest-Timing und die Digest-Rate. Sie erhalten auch die Digest-Timing-Verteilung, sodass Sie aus rekursiveren Paterns ein außergewöhnlich langes Digest-Timing erkennen können. Alle Echtzeitdaten sind mit Ereignissen verknüpft, sodass Sie bestimmen können, welche Aktionen die Anwendungsleistung verändert haben. Schließlich können Sie die Zeitdienstmethode zeitlich festlegen und deren Ausführung zählen, um diejenigen zu ermitteln, die den größeren Einfluss auf die Laufzeit Ihrer App haben.
Disclamer: Ich bin der Autor der Erweiterung
Ein praktisches Tool, um den Verdauungszyklus im Auge zu behalten, ist das hervorragende ng-stats-Tool von @kentcdodds . Es erzeugt so ein kleines visuelles Element und kann sogar über ein Lesezeichen implementiert werden. Es kann sogar in iFrames wie jsfiddle verwendet werden.
Wenig nützlich, um Statistiken über den eckigen Auszug / die Uhren Ihrer Seite anzuzeigen. Diese Bibliothek verfügt derzeit über ein einfaches Skript zum Erstellen eines Diagramms (siehe unten). Außerdem wird ein Modul namens
angularStatsmit einer Direktive namens aufgerufen, mitangular-statsder Winkelstatistiken an einer bestimmten Stelle auf der von Ihnen angegebenen Seite platziert werden können.
Gefunden unter https://github.com/kentcdodds/ng-stats
Sie können UX Profiler verwenden
Für den strengen Modus, einen Lauf von Digest Cucle, führen Sie ihn in der F12-Konsole in Chrome aus
angular.element(document).injector().invoke(['$rootScope',function($rootScope) { var a = performance.now(); $rootScope.$apply(); return performance.now()-a; }])Die oben beschriebenen Tools haben Sie bereits auf die Idee gebracht, die Leistung der Digest-Schleife zu messen. Die meisten wichtigen Punkte zur Steigerung der Performance des Digest-Zyklus sind
Überwachen Sie Scroll-Ereignisse genau, um alle unsichtbaren Elemente auszublenden und
die Anzahl der Beobachter erheblich zu verringern.
Verwalten Sie überschaubare $ Digest-Zyklen für alle anderen Ereignisse.