© Excellent backgrounds/Shutterstock.com
AngularJS: Grundlagen und Messmethoden

Performanceprobleme meistern


JavaScript-Frameworks wie AngularJS erlauben es, Applikationslogik vom Server zum Client zu verschieben. Damit wird der Browser ein wichtiger Bestandteil der Laufzeitumgebung. Dies erfordert, den clientseitig ausgeführten Applikationscode umfangreicher zu analysieren als bisher, um Performanceprobleme frühzeitig zu erkennen. Dabei helfen Messmethoden für die Analyse von Scopes und Digest Cycles.

Die Performance von Softwareapplikationen lässt sich mit verschiedenen Kennzahlen beschreiben, die sich je nach Einsatzgebiet und Applikationstyp unterscheiden. Datenbanksysteme können beispielsweise mit Lese- und Schreiboperationen pro Sekunde charakterisiert werden, High-Performance-Anwendungen aus dem wissenschaftlichen Umfeld mit Fließkommaoperationen pro Sekunde. Eine Performancekennzahl, die besonders bei Webapplikationen eine entscheidende Rolle spielt, ist die wahrgenommene Reaktionszeit auf Benutzereingaben – nicht zuletzt aufgrund der beständig steigenden Internetbandbreite, die die Erwartungshaltung der Benutzer fortwährend steigen lässt.

Noch vor wenigen Jahren zielten Maßnahmen, die Performance von Webapplikation zu steigern, hauptsächlich auf die Komprimierung der statischen Inhalte und deren Übertragung ab, beispielsweise durch gzip-Komprimierung, Zusammenfassung von HTTP-Anfragen mittels CSS Sprites oder durch Code Minifying [1].

Aus dem Nachladen einzelner Seitenelemente mittels Ajax haben sich so genannte Single-Page-Applikationen entwickelt. Gemeinsam mit HTML5 und damit dem „Local Data Storage“ [2] führt diese Entwicklung dazu, dass sich die Anwendungslogik vom Server zum Client verlagert. Dementsprechend verschieben sich auch die Ansatzpunkte zur Performancesteigerung, insbesondere wenn der Server nur noch als Datenquelle über eine REST-Schnittstelle fungiert. Diese Entwicklung erfordert es, die Maßnahmen zur Performancesteigerung um clientseitige Softwareaspekte zu erweitern, insbesondere um auf die unterschiedlichen Hardwarekapazitäten auf Clientseite reagieren zu können.

Diese zweiteilige Artikelserie befasst sich mit Softwareaspekten und typischen Performanceproblemen des AngularJS-Frameworks, einem der am weitesten verbreiteten JavaScript-Frameworks für Single-Page-Applikationen [3]. Gründe für die weite Verbreitung sind u. a. der einfache Einstieg, die Unterstützung von Funktionskapselung in Direktiven und Filtern, die Strukturierung entsprechend des MVC-Patterns und die automatische Synchronisation der Darstellung im DOM und des Datenmodells.

Diese automatische Synchronisation basiert bei AngularJS auf so genannten Scopes und dem Digest Cycle, zwei Konzepten, die tief im Design des Frameworks verankert sind. Auch wenn diese Konzepte die Entwicklungsaufwendungen reduzieren und zugleich ausreichend Flexibilität für die meisten Szenarien bieten, können sie die wahrgenommene Reaktionszeit einer Webapplikation erheblich beeinträchtigen oder die Webapplikation gänzlich unbenutzbar machen, werden sie falsch eingesetzt.

Um diese Performanceprobleme erkennen und vermeiden zu können, erläutert der vorliegende erste Teil der Artikelserie relevante Grundkonzepte von AngularJS und stellt anschließend ausgewählte Werkzeuge vor, um eine adäquate Daten- und Informationsgrundlage für die Problemanalyse zur Verfügung zu haben. Darauf aufbauend wird im nächsten Teil der Artikelserie eine Reihe von Maßnahmen vorgestellt, mit denen die Performance von AngularJS-Webapplikationen verbessert und Probleme vermieden werden können.

AngularJS-Konzepte

AngularJS nutzt Scopes und den Digest Cycle als zentrale Elemente, um das Datenmodell und das User Interface (UI) im Document Object Model (DOM) synchron zu halten. Da in diesen beiden Konzepten die größten Risiken und damit auch die größten Potenziale für Performanceverbesserungen liegen, beziehen sich alle vorgestellten Maßnahmen auf diese beiden Konzepte. Ein entsprechendes Grundverständnis ist daher für einen erfolgreichen Einsatz der Maßnahmen entscheidend.

straube_angularjs_1.tif_fmt1.jpgAbb. 1: Übersicht über die Grundkonzepte von AngularJS, deren Zusammenhänge und Aufgaben

Der Scope und seine Struktur

Für die Datenhaltung nutzt AngularJS POJOs (Plain Old JavaScript Objects), die – gemäß allgemeinen JavaScript-Prinzipien – keine Getter und Setter, sondern nur sichtbare (public) Attribute verwenden. Diese ­POJOs werden in AngularJS Scopes genannt. Ein Scope besteht in AngularJS aus drei Arten von Attributen: dokumentierte AngularJS-Felder ($-Präfix), nicht dokumentierte AngularJS-Felder ($$-Präfix), von deren Verwendung abgeraten wird, und applikationsspezifische Felder (ohne Präfix). Diese Scopes bilden in AngularJS eine Baumstruktur, wobei die Wurzel rootScope ($rootScope) genannt wird.

In Abbildung 1 sind drei Scopes beispielhaft dargestellt: Das $parent-Feld ist ein Verweis auf den Eltern-Scope und kann gemäß Dokumentation verwendet werden. $$watchers ist ein Array von Funktionen, die vom Digest Cycle aufgerufen werden. Da sich diese Felder mit neuen AngularJS-Versionen ändern können, sollten sie nicht direkt verwendet werden. Die Felder myBoolVal, myStringVal und myListFilter sind applikationsspe...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang