Motivation und Vorgehen
Mithilfe von Single Page Application Frameworks wie Angular oder React werden heutzutage intuitive und performante Webapplikationen entwickelt. Der Trend hin zu mehr Anzeigelogik im Client ermöglicht dem Endnutzer ein flüssigeres Erlebnis und damit eine bessere User-Experience. Zugleich stellt es den Softwareentwickler aber vor zusätzliche Herausforderungen in Bezug auf Performance. Neben der Reaktionszeit der angesteuerten Schnittstelle spielt zunehmend auch die Verarbeitung und Organisation im Webclient eine größere Rolle. Performance-Messung und - Optimierung im Web-Bereich ist ein breites Feld, in dem es bereits viele ausgereifte Tools und Kennzahlen gibt, die einem Web-Entwickler dabei helfen, eine klassische Website oder Webapplikation zu optimieren.
Im Rahmen dieser Bachelorarbeit wurden für den Bereich der Single Page Applications am Beispiel von konkreten Kunden-Applikationen Tools und Methoden zur Messung sowie mögliche Optimierungen erörtert. Ziel war es, einen allgemeinen Kompass bzw. Leitfaden an Performance-Maßnahmen zu erhalten, welcher unseren Web-Entwicklern ermöglicht, fortlaufend in Projekten die nötigen Kennzahlen und Methoden zur Hand zu haben, um so strukturiert Flaschenhälse frühzeitig erkennen und vermeiden zu können.
Um dies umzusetzen, wurde in der Arbeit wie folgt vorgegangen:
- Grundlagen wurden erörtert, um ein Verständnis für die später genutzten Techniken herzustellen
- Zusätzlich zu den Grundlagen werden Frameworks und Programmiersprachen erläutert, die sich in unserem Unternehmen etabliert haben
- Vorhandene Tools zu Performanceanalyse wurden vorgestellt (Google-Lighthouse, WebPageTest, Laufzeitanalyse in der Entwicklerkonsole eines Browsers)
- Evaluierung des entwickelten Leitfadens
Entwicklung des Leitfadens zur Performance-Optimierung
Um den Rahmen dieses Blogbeitrages nicht zu sprengen, wird direkt zum Kernkapitel der Bachelorarbeit gesprungen und nötige Grundlagen im selben Zug erläutert. Das Kernkapitel dieser Arbeit beinhaltet die Entwicklung eines Leitfadens zur Performance-Optimierung von Single Page Applications (SPA).
Ein geeigneter Weg zur Performanceanalyse von SPAs kann über ein im Browser integriertes Tool zur Durchführung einer Laufzeitanalyse sein. Denn diese nehmen jegliche Aktivitäten des Browsers auf und stellen sie danach in mehreren Auswertungen dar. So ist es möglich, den Test zu starten, einen gewünschten Arbeitsablauf auszuführen und danach das Ergebnis zu analysieren.
Die Analyse eines Arbeitsablaufes ist eine der Schlüsselfaktoren, weshalb so ein Tool für den Leitfaden verwendet wurde. Die von uns entwickelten SPAs helfen wiederum anderen Firmen komplexe Arbeitsschritte zu digitalisieren und damit zu vereinfachen. Was bedeutet, dass diese Applikationen eine große Menge an Daten verarbeiten und eine intuitive Benutzeroberfläche bieten müssen, die mit diesen komplexen Daten umgehen kann. Wichtig für uns zu wissen ist, in welchen Arbeitsschritten der Applikationen Performance-Probleme auftreten.
Da in SPAs fast alles ausschließlich auf dem Client selbst passiert, ist es nicht damit getan, verschieden API-Calls zu testen. Es müssen die clientseitigen Aktivitäten untersucht werden. Diese Möglichkeit bietet uns das gerade erwähnte Browser integrierte Tool zur Durchführung von Laufzeitanalyse. Eine Laufzeitanalyse nimmt jegliche Aktivitäten des Browsers auf und stellt sie in einem JavaScript-Flamechart dar, welches jegliche ausgeführten JavaScript-Funktionen auflistet, zusätzlich aber auch alle Netzwerkaktivitäten und wichtige Metriken wie die Bildwiederholrate, mit der wiederum die Performance analysiert werden kann.
Außerdem ist die Zugänglichkeit für uns als Firma für dieses Tool extrem gut. Denn jeder verbreitete Browser verfügt im Bereich der Entwickler-Tools verschiedene Werkzeuge, die beim Durchführen einer Laufzeitanalyse behilflich sein können. Der Detailgrad und die Darstellung variieren, konzeptionell ist die Anwendung des entwickelten Konzepts aber in jedem der gängigen Browser möglich. Für die Durchführung der Tests im Rahmen dieser Arbeit wurde vorrangig Google Chrome verwendet.
Der entwickelte Leitfaden besteht aus fünf Schritten, die in der folgenden Grafik zu sehen sind.
In der Vorbereitung wird beschrieben, welche Rahmenbedingungen zu schaffen sind, um eine ideale Testumgebung zu kreieren.
In der Netzwerkanalyse wird erläutert, wie verschieden Netzwerkaktivitäten zu deuten sind und an welchen Stellen optimiert werden sollte.
Die Performanceanalyse ist der umfangreichste Schritt. Hier wird erklärt, wie das JavaScript-Flamechart zu lesen ist und wie mit den zusätzlich bereitgestellten Metriken Performance Probleme erkannt werden können.
Häufig auftretende Probleme werden aufgelistet und erklärt, wie diese in der Laufzeitanalyse zu erkennen sind. Zusätzlich werden mögliche Lösungsansätze zu diesen Problemen gestellt, um diese zu beheben.
Schritt der Performanceanalyse
Die Performanceanalyse wird in diesem Beitrag im Detail beleuchtet. Sie bildet den Kern des Leitfadens und übermittelt dem Entwickler ein Gefühl wie gearbeitet werden muss.
Wie bereits beschrieben, variiert hier der Detailgrad und die Darstellung der aufgenommenen Analyse je nach verwendetem Browser. Wichtige Werte wie z. B. die Bildwiederholrate und CPU-Auslastung werden aber von allen Browsern dargestellt. Oft mit „FPS“ abgekürzt, was für „Frames per seconds“ steht, ist die Bildwiederholrate eins der wichtigsten Metriken zur Untersuchung von Ergebnissen der Laufzeitanalyse und die davon abhängige Performance. Die meisten Browser stellen die Bildwiederholrate in einem Laufzeitdiagramm dar. Sind FPS-Einbrüche vom Diagramm ablesbar, gab es zu diesem Zeitpunkt im Test Performance-Probleme. Diese Zeitspanne sollte genauer betrachtet werden, denn hier benötigt der Client zu viel Leistung für das Verarbeiten von JavaScript-Dateien. Deshalb kommt es zu FPS-Einbrüchen.
Nun besteht die Aufgabe darin, eigene Funktionen aus dem Flame-Chart herauszufiltern. Die meisten Funktionen, die hier zu sehen sind, sind Funktionen des Frameworks. Um eigene Funktionen am schnellsten zu finden, sollten die verschiedenen Funktionen nach Ihrer Farbe betrachtet werden. Hat z. B. eine Funktion des Frameworks die Farbe grün, können alle Funktionen dieser Farbe ignoriert werden. Die eigenen Funktionen halten sich in den meisten Fällen weiter unten auf. Ebenso sind es Farben, die im Vergleich wenig zu finden sind.
Wurde eine Funktion gefunden, die selbst geschrieben wurde, muss untersucht werden, ob diese Funktion oder diese Farbe sich über einen großen Teil der Verarbeitungsdauer hinwegzieht. Häufig ist es eine Funktion, die sehr oft hintereinander aufgerufen wird. Eher selten ist es ein einziger Aufruf, der eine lange Verarbeitungszeit hat. In der folgenden Abbildung ist ein Beispiel zu sehen, wie die eigenen Funktionen in einem Flame-Chart aussehen können. Es sind nur die violetten Balken, die selbst geschrieben wurden. Alle anderen sind vom Framework.
Um das Problem zu lösen, muss die Zeile im Code gefunden werden, in der die Funktion aufgerufen wurde. Die Zeile und den Dateinamen stellt die Laufzeitanalyse bereit. Darin muss nach Problemen gesucht werden, die die Verarbeitung verlängern. Es sollte nach jeder Änderung, die vorgenommen wurde, ein erneuter Test gestartet werden.
Dieses Verfahren sollte so oft wiederholt werden, bis keine FPS-Einbrüche mehr zu verzeichnen sind. Allgemein sollte darauf geachtet werden, nicht länger als eine Sekunde zu benötigen, um das erste Feedback an den Nutzer zu schicken. Aber werden die FPS-Einbrüche weniger, werden auch die Verarbeitungszeiten kürzer, weswegen diese Probleme meistens zur gleichen Zeit gelöst werden.
