Tipps und Tricks mit AngularJS, Teil 9: Performance-Tuning

Inhaltsverzeichnis

Benchmarks zufolge ist Angular 2 dank seiner Optimierungsmöglichkeiten für Immutables und Observables auch bei über 50000 gebundenen Daten noch sehr leistungsfähig. Warum das so ist und wie sich die Datenstrukturen zum Verbessern der Performance einsetzen lassen, zeigt der vorliegende Artikel anhand eines Beispiels.

Immutables sind nicht editierbare Datenstrukturen. Ändern sich die davon beschriebenen Objekte, ist das gesamte Immutable durch ein neues zu ersetzen. Um Veränderungen zu entdecken, müssen Frameworks nur prüfen, ob das Immutable als Ganzes getauscht wurde, statt sich über dessen einzelne Eigenschaften auf dem Laufenden zu halten. Oder um es etwas technischer auszudrücken: Das Framework muss nur prüfen, ob die Objektreferenz noch dieselbe ist.

Veranschaulichen kann das die Methode delay im nachfolgenden Beispiel. Ihre Aufgabe ist es, für den ersten Flug eines Arrays eine Verspätung von 15 Minuten zu vermerken. Um das Beispiel schlank zu halten, kommen keine Bibliotheken zum Einsatz, die die Semantik von Immutables erzwingen. Stattdessen finden herkömmliche JavaScript-Objekte Verwendung, die das Programm nicht verändern darf.

Eingangs definiert delay die Variablen oldFlights und oldFlight, die auf das gesamte Array und den betroffenen Flug verweisen. Ein Date-Objekt oldFlightDate repräsentiert das Datum des Fluges. Anschließend erzeugt die Methode drei Objekte, die die neuen Zustände wiederspiegeln. newFlightDate verweist auf das geänderte Datum, das das Objekt newFlight gemeinsam mit den restlichen Werten von oldFlight übernimmt. Zusätzlich zeigt newFlights auf ein neues Array, das sich aus dem neuen Flug und den restlichen, nicht geänderten Flügen zusammensetzt. Für den Zugriff nutzt delay die Array-Methode slice.

Für das Array, das slice liefert, kommt der aus drei Punkten bestehende Spread-Operator aus ECMAScript 2015 zum Einsatz. Er fügt dessen Inhalte direkt ins übergeordnete Array ein und vermeidet somit eine Schachtelung. Das Konstrukt veranschaulicht, dass Routinen nicht geänderte Teilbäume aus alten Immutables unverändert übernehmen können.

Danach verstaut die Methode das neue Array in der Variable this.flights und ändert somit seine Objektreferenz. Die Debug-Ausgaben am Ende zeigen, dass ein einziger Vergleich reicht, um Änderungen nachzuverfolgen.

delay() {

    const ONE_MINUTE = 1000 * 60;

    let oldFlights = this.flights;
    let oldFlight = oldFlights[0];
    let oldFlightDate = new Date(oldFlight.datum);

    let newFlightDate = new Date(oldFlightDate.getTime() + ONE_MINUTE *
     15);
    let newFlight =  {
            id: oldFlight.id,
            abflugort: oldFlight.abflugort,
            zielort: oldFlight.zielort,
            datum: newFlightDate.toISOString()
    };
    let newFlights = [
        newFlight,
        ...oldFlights.slice(1, this.fluege.length-1)
    ];

    this.flights = newFlights;

    console.debug("Array: " + (oldFlights == newFlights)); // false
    console.debug("#0: " + (oldFlights[0] == newFlights[0])); // false
    console.debug("#1: " + (oldFlights[1] == newFlights[1])); // true

}