© StonePictures/Shutterstock.com
Kolumne: Enterprise Tales

Kolumne: Enterprise Tales


Mit Single-Page Applications lassen sich performante Webanwendungen entwickeln. Bei wachsender Projektgröße kann es aber zu Geschwindigkeitseinbußen kommen. Was kann man tun, wenn eine SPA langsam wird?

Das war doch mal alles viel schneller?

Egal ob Angular, React oder selbst entwickelt: Ab einer bestimmten Projektgröße kann es passieren, dass eine Single-Page Application (SPA) nicht mehr flüssig läuft und sich Ladezeiten vervielfachen. Der Grund hierfür ist häufig trivial: Die Anwendung ist schlichtweg zu groß. Durch die Verlagerung von Status und Logik in den Browser führt jedes neue Feature implizit zum Anstieg der Menge an JavaScript-Code. Zusätzlich wächst auch die Größe und Anzahl anderer Ressourcen, wie zum Beispiel von Stylesheets oder Bildern.

Eine große Datenmenge führt nicht nur zu einer höheren Netzwerklatenz und damit zu längeren Ladezeiten, sie hat vor allem einen negativen Einfluss auf die Ausführungszeit des JavaScript-Codes. Dieser muss nämlich zunächst analysiert („Parsing“) und kompiliert werden, bevor er überhaupt ausführbar ist. Vor allem bei älteren oder leistungsschwächeren Endgeräten (etwa Netbooks oder Smartphones) macht sich das durchaus bemerkbar. Aber auch normale Desktoprechner können, je nach Browser, bei großen Mengen an JavaScript-Code an ihre Grenzen kommen. Beispielsweise kann eine SPA im Chrome-Browser schnell laden und flüssig laufen, während die gleiche Anwendung im Internet Explorer 11 um ein Vielfaches langsamer ist. Abbildung 1 zeigt die Zeit, die verschiedene Endgeräte zum Parsen einer 1 MB großen JavaScript-Datei benötigen [1]. Die Zahlen sind durchaus alarmierend, vor allem vor dem Hintergrund, dass viele SPAs weitaus mehr als nur 1 MB groß sind.

koelpin_et_1.tif_fmt1.jpgAbb. 1: Vergleich der benötigten Zeit für das Parsen von 1 MB JavaScript-Code

Schnelle Analyse

Die meisten der aktuellen Browser liefern umfangreiche Tools zur Untersuchung der Performanz von Webanwendungen. Beispielsweise findet man in den Developertools des Chrome-Browsers Werkzeuge zur Visualisierung von Ausführungszeiten sowie ein Tool zur Durchführung von Qualitätsaudits. Für diesen Beitrag wurden Teile der mobilen Twitter-Seite Twitter Lite [2] mithilfe der Chrome-Tools analysiert. Diese SPA ist mit React entwickelt und benötigt insgesamt ungefähr 2 MB JavaScript-Code für die Ausführung.

Abbildung 2 zeigt die Verwendung von Chromes Visualisierungs- und Simulationstools. Hier lässt sich zum Beispiel erkennen, dass sich die benötigte Ausführungszeit des Codes von ...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang