AngularJS
Leistungsprofilierung

Alles über Profiling

Was ist Profiling?

Per Definition ist Profiling eine Form der dynamischen Programmanalyse, die beispielsweise den Speicherplatz (Speicher) oder die zeitliche Komplexität eines Programms, die Verwendung bestimmter Anweisungen oder die Häufigkeit und Dauer von Funktionsaufrufen misst.

Warum ist es notwendig?

Profiling ist wichtig, da Sie nicht effektiv optimieren können, wenn Sie nicht wissen, was Ihr Programm am meisten Zeit damit verbringt. Wenn Sie die Ausführungszeit Ihres Programms (Profiling) nicht messen, wissen Sie nicht, ob Sie es tatsächlich verbessert haben.

Werkzeuge und Techniken:

1. Integrierte Entwickler-Tools von Chrome

   Dazu gehört ein umfangreiches Set an Tools für die Profilerstellung. Sie können Engpässe in Ihrer Javascript-Datei, CSS-Dateien, Animationen, CPU-Auslastung, Speicherverluste, Netzwerksicherheit usw. ermitteln.

   Machen Sie eine Timeline- Aufnahme und suchen Sie nach verdächtig langen Evaluate Script-Ereignissen. Wenn Sie welche finden, können Sie den JS Profiler aktivieren und Ihre Aufnahme wiederholen, um detailliertere Informationen darüber zu erhalten, welche JS-Funktionen genau aufgerufen wurden und wie lange die einzelnen Funktionen dauerten. Weiterlesen...

2. FireBug (Verwendung mit Firefox)

3. Dynatrace (Verwendung mit IE)

4. Batarang (Verwendung mit Chrome)

   Es ist ein veraltetes Add-On für Chrome-Browser, obwohl es stabil ist und zur Überwachung von Modellen, Leistung und Abhängigkeiten für eine Winkelanwendung verwendet werden kann. Es eignet sich gut für kleine Anwendungen und kann Ihnen einen Einblick in die Gültigkeitsbereiche der Gültigkeitsbereichsvariablen auf verschiedenen Ebenen geben. Es informiert Sie über aktive Beobachter, Ausdrücke beobachten, Sammlungen in der App ansehen.

5. Watcher (Verwendung mit Chrome)

   Schöne und einfache Benutzeroberfläche, um die Anzahl der Beobachter in einer Angular-App zu zählen.

6. Verwenden Sie den folgenden Code, um die Anzahl der Beobachter in Ihrer Winkel-App manuell herauszufinden (Verdienst @Words Like Jared Anzahl der Beobachter ).

(function() {
    var root = angular.element(document.getElementsByTagName('body')),
        watchers = [],
        f = function(element) {
        angular.forEach(['$scope', '$isolateScope'], function(scopeProperty) {
            if(element.data() && element.data().hasOwnProperty(scopeProperty)) {
                angular.forEach(element.data()[scopeProperty].$$watchers, function(watcher) {
                watchers.push(watcher);
                });
            }
        });

        angular.forEach(element.children(), function(childElement) {
            f(angular.element(childElement));
        });
    };
 
    f(root);
 
    // Remove duplicate watchers
    var watchersWithoutDuplicates = [];
    angular.forEach(watchers, function(item) {
        if(watchersWithoutDuplicates.indexOf(item) < 0) {
            watchersWithoutDuplicates.push(item);
        }
    });
    console.log(watchersWithoutDuplicates.length);
})();

7. Es stehen mehrere Online-Tools / Websites zur Verfügung, die eine Vielzahl von Funktionen ermöglichen, um ein Profil Ihrer Anwendung zu erstellen.

   Eine solche Site ist: https://www.webpagetest.org/

   Damit können Sie einen kostenlosen Website-Geschwindigkeitstest von mehreren Standorten auf der ganzen Welt mit realen Browsern (IE und Chrome) und mit echten Verbindungsgeschwindigkeiten für Konsumenten durchführen. Sie können einfache Tests oder erweiterte Tests durchführen, einschließlich Transaktionen in mehreren Schritten, Videoerfassung, Blockierung von Inhalten und vieles mehr.

Nächste Schritte:

Fertig mit Profiling. Es bringt Sie nur die Hälfte der Straße hinunter. Die nächste Aufgabe besteht darin, Ihre Ergebnisse tatsächlich in Aktionselemente umzuwandeln, um Ihre Anwendung zu optimieren. In dieser Dokumentation erfahren Sie, wie Sie mit einfachen Tricks die Leistung Ihrer Winkel-App verbessern können.

Viel Spaß beim Codieren :)