4.6 Performance

Mit der Kenntnis des Rendering-Prozesses einer Webseite lässt sich eine gute Performance umsetzen. Dieser Ablauf ist im Kapitel Hintergrund unter Rendering-Prozess genau beschrieben. Die folgende Abbildung 4.14 zeigt die Kernelemente des Prozesses nochmals im Überblick.

Abbildung 4.14: Rendering-Prozess

Zur Auffrischung die wichtigsten Punkte nochmals: Der Browser kann die Webseite maximal 60 Mal pro Sekunde neu zeichnen. Änderungen am DOM und am CSSOM (Abbildung 4.14) lösen das Rendern aus.

Deswegen müssen viele kleine Änderungen ausserhalb des Browser-DOMs [6] (Abbildung 4.14 rechts) – am besten in einem sogenannten Shadow-DOM – geschehen. Ein Shadow-DOM ist ein Teilbaum, welcher nicht am Browser-DOM angehängt ist. Für einen reibungslosen Ablauf ist es sinnvoll, die Änderungen nach dem Abhängen des Elternknotens zu vollziehen. Nach den Änderungen ist der Teilbaum wieder an den gewünschten Ort einzuhängen.

Code 4.10: Performance-Optimierung

const addAllOptions = (options) => {
    const placeHolder = createHolder();
    columnView.replaceWith(placeHolder);
    if (options.length > 50) {
        // same work as else but async
    } else {
        options.forEach((option) => {
            optionsController.addOption(option);
        });
        updateScrollbar(columnView);
        placeHolder.replaceWith(columnView);
    }
};

Code 4.10 ist eine Stelle, die diese Technik verwendet. Das Anzeigen eines Platzhalters mit einem Lade-Indikator an der Ursprungsstelle bewirkt, dass der Nutzer ein Feedback erhält. Sobald der Spalten-Container abgekoppelt ist, lädt die Funktion die Optionen in den Shadow-DOM. Nach Abschluss ersetzt sich der Lade-Indikator der originalen Stelle im Renderbaum durch den Container mit den neuen Elementen.

Weiterhin ist darauf zu achten, dass CSS-Klassen [7] an Stelle von Inline-Styles [8] ihre Verwendung finden. Die Selektoren sollten hierarchisch möglichst flach und nicht verschachtelt sein. Wenn es die Situation erlaubt, ist es besser, nicht mit innerHTML zu arbeiten. In diesem Projekt ist es für die Anzeige der Label jedoch nötig, innerHTML zu nutzen. Dies liegt daran, dass ein Label auch ein Bild enthalten kann. Generell verwendet die neue Auswahlkomponente keine Inline-Styles. Die einzige Ausnahme betrifft das verborgene Eingabefeld. Durch den Code 4.11 sind die Properties vor dem einfachen Überschreiben [9] geschützt.

Code 4.11: Inline-Style für Input-Feld

inputElement.setAttribute(
    "style", "all:            unset       !important; " +
             "z-index:        -1          !important; " +
             "position:       absolute    !important; " +
             "inset:          5px         !important; " +
             "color:          transparent !important; " +
             "pointer-events: none        !important; "
);

Die Regeln in Code4.11 sorgen dafür, dass das Input-Feld sowohl transparent als auch resettet ist. Zudem befindet es sich im Hintergrund und besitzt dieselbe Grösse wie der Container mit dem ausgewählten Wert.

4.6.1 Performance-Vergleich

Durch die Anpassungen der Performance-Optimierung verschnellert sich die Ladezeit bei grossen Datenmengen enorm. Die Testseite enthält vier existierende und vier neue Auswahlkomponenten mit denselben Inhalten wie je eine der existierenden. Je eine der Selects enthält eine grosse Datenmenge von über 4'000 Werten. Die folgenden zwei Bilder 4.15 und 4.16 zeigen die Messung während des Seitenaufbaus.

Abbildung 4.15: Performance-Test vor Anpassungen

Die Grafik 4.15 zeigt die mit über 5 Sekunden (rechts unten in Blau) lange Ladedauer der früheren Version. Die Implementation führte sehr viele Aktionen auf dem Renderbaum aus. Die lange Wartezeit bestätigten mehrere Feedbacks der Nutzer – mehr dazu im Kapitel User-Tests.

Abbildung 4.16: Performance-Test nach Anpassungen

Ein Refactoring der früheren Implementation führt zur Auslagerung der aufwendigen Arbeiten auf den Shadow-DOM. Dadurch verkürzt sich der Ladevorgang um vier bis fünf Sekunden auf knapp 0.4 Sekunden (Abbildung 4.16 rechts unten in Blau). Der Vergleich zwischen Abbildung 4.15 und 4.16 zeigt, dass die Seite um Faktor 13 schneller lädt. Feedbacks zu den durchgeführten User-Tests mit Programmierern wie auch Endnutzern sowie manuelle Tests sind im nachfolgenden Kapitel aufgeführt.

[6] Im Renderbaum verwendeter und im Browser angezeigter DOM [7] (Ofoegbu, 2023) [8] Offizieller Begriff: Element attached style ⇒ Styles direkt im HTML-Element mit Attribut style definiert [9] !important nicht verwenden