AngularJS und Knockout im Vergleich

AngularJS und Knockout: Welches Framework die bessere Performance zeigt
Kommentare

Frameworks zur Entwicklung von Single Page Applications gibt es mittlerweile wie Sand am Meer. Umso schwerer haben es Architekten und Entwickler, die richtige Technologieentscheidung zu treffen. Performance spielt dabei eine große Rolle. Im vierten Teil der Serie „AngularJS vs. Knockout“ geht es darum um den Performance-Vergleich der beiden beliebten JavaScript-Frameworks.

Ein wichtiger Aspekt, grade wenn es um das Binden von großen Datenmengen geht, ist die Performance. Eine Webanwendung, die bei einer überschaubaren Menge von anzuzeigenden Daten mit kurzen Ladezeiten trumpft, kann sich bei größeren Datenmengen als unangenehm langsam entpuppen. Wichtig für die Performance sind im Wesentlichen drei Faktoren: Das Backend, welches die Daten zur Verfügung stellt, die Data Binding Engine und die Komplexität der Darstellung.

Doch welches Framework verfügt über die effizientere und somit schnellere Data Binding Engine? Die Seite jsperf.com bietet die Möglichkeit eines direkten Performancevergleichs zwischen AngularJS und Knockout. Bei der Performanceanalyse wird das Binden und Rendern von verschieden großen Datenmengen simuliert. Abbildung 2 zeigt das Ergebnis des Benchmarks in verschiedenen Google-Chrome-Versionen. Auffallend ist hierbei, dass die Performance neben der Datenmenge auch stark von der Browserversion abhängig ist.

Abb. 2: Performancevergleich AngularJS vs. Knockout

Bei kleineren Datenmengen würde der Benutzer den Unterschied mit hoher Wahrscheinlichkeit kaum bis gar nicht wahrnehmen. Steigt jedoch die Datenmenge an, führt dies unter Umständen zu unnötig langen Wartezeiten. Im schlimmsten Fall kann eine ineffiziente Implementierung sogar zum Absturz des Webbrowsers führen.

In erster Linie sollten Webanwendungen natürlich so konzipiert sein, dass auch die Visualisierung größerer Mengen an Daten kein Problem darstellt. Treten jedoch trotzdem Performanceprobleme auf, so kann die Ursache mit der Hilfe eines JavaScript-Profilers eingegrenzt werden. Dieser schlüsselt sämtliche Funktionsaufrufe und deren Ausführungsdauer auf. Besonders empfehlenswert für die Profilerstellung ist Googles Browser Chrome. Der Profiler befindet sich in den Developer-Tools, die sich mit der Taste F12 aufrufen lassen. Mit diesem können neben der Ausführungszeit einzelner Funktionen („Collect JavaScript CPU Profile“) auch die Speicherauslastung analysiert („Take Heap Snapshot“) und eventuelle Memory Leaks ausfindig gemacht werden („Record Heap Allocations“).

Doch welches Framework kann nun bei dem Thema Performance punkten? Die Ergebnisse des Benchmarks zeigen, dass sich sowohl AngularJS als auch Knockout auf einem ähnlichen Niveau bewegen. Jedoch hängt die letztendlich erzielte Performance stark von der Implementierung der jeweiligen Anwendung ab. Besondere Vorsicht ist bei der Verwendung von Templates geboten, welche oft für komplexere Darstellungsszenarien benötigt werden.

Eine Falle, in die Knockout-Neulinge oftmals treten, ist der lockere Umgang mit Comment Bindings. Listing 3 zeigt ein potenzielles Problem, bei dem die Sektion unterhalb des Comment Bindings nur dann dargestellt werden soll, wenn Elemente in der items Collection vorhanden sind. Ändert sich das Array, so wird für jedes Element der Sammlung ein Rendering-Vorgang durchgeführt, was zu großen Performanceeinbußen führen kann. Wie dennoch bei der Verwendung von Templates eine maximale Anwendungsperformance mittels Technologien wie Caching und Precompiling erreicht werden kann, wird im folgenden Abschnitt erläutert.




Aufmacherbild: performance level conceptual meter indicate hundred per cent, isolated on white background von Shutterstock / Urheberrecht: donskarpo

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -