Große Listen mit dem Angular CDK virtualisieren

Durch die Implementierung von virtuellem Scrolling können Sie die Reaktionsfähigkeit großer Listen verbessern.

Stephen Fluin

Scrolllisten sind heute eines der häufigsten UI-Muster, egal ob Sie einen unendlich scrollenden Feed auf Ihrer bevorzugten Social-Media-Website durchsuchen oder in einem Unternehmensdashboard navigieren. Wenn Scrolllisten sehr lang werden (Hunderte, Tausende oder Hunderttausende von Elementen), kann die Anwendungsleistung darunter leiden.

Das Laden großer Listen kann langsam sein, da die Anwendung alle Daten im Voraus laden und rendern muss. Auch das Rendern und Navigieren kann langsam sein , da jedes Element in der Liste umfangreiche Daten, Medien und Funktionen enthalten kann.

Nutzer können Probleme haben, wenn sie die Seite laden oder scrollen, was zu Frustration und zum Verlassen der Seite führen kann.

Virtuelles Scrolling in Angular mit dem Component Dev Kit

Virtuelles Scrolling ist die primäre Technik, um diese Skalierungsprobleme zu beheben. Virtuelles Scrolling erweckt den Eindruck einer sehr langen Liste, indem eine entsprechend große Scrollleiste bereitgestellt wird und die Liste durchlaufen werden kann, ohne dass die Anwendung die gesamte Liste im Arbeitsspeicher speichern oder auf der Seite rendern muss.

In Angular wird virtuelles Scrolling vom Component Dev Kit (CDK) bereitgestellt. Wenn Sie die Art und Weise ändern, wie Sie Listen durchlaufen, und ein paar zusätzliche Konfigurationsparameter angeben, verwaltet das virtuelle Scrolling des CDK automatisch das virtuelle Rendern Ihrer Listen und verbessert so die Seitenleistung und Reaktionsfähigkeit.

Statt die gesamte Liste auf einmal zu rendern, wird nur eine Teilmenge der Elemente gerendert, die auf den Bildschirm passen (plus ein kleiner Puffer). Wenn der Nutzer navigiert, wird eine neue Teilmenge von Elementen berechnet und gerendert, wobei das vorhandene DOM bei Bedarf wiederverwendet wird.

Im Rest dieses Beitrags wird beschrieben, wie Sie das grundlegende virtuelle Scrolling einrichten. Ein vollständig funktionierendes Beispiel finden Sie in dieser Beispiel-App:

Virtuelles Scrolling einrichten

Prüfen Sie zuerst, ob Sie @angular/cdk mit Ihrem bevorzugten Paketmanager installiert haben. Führen Sie den folgenden Befehl im Terminal aus, um es mit npm zu installieren:

npm install --save @angular/cdk

ScrollingModule zu Ihrer App hinzufügen

Importieren Sie nach der Installation des CDK ScrollingModule, das das virtuelle Scrolling verarbeitet, aus dem Paket @angular/cdk/scrolling. Fügen Sie es dann dem Imports-Array Ihres Moduls hinzu:

import {ScrollingModule} from '@angular/cdk/scrolling';

...
imports: [
  ScrollingModule
...
]
...

Viewport erstellen

Wenn Sie sehen möchten, wie das Paket funktioniert,erstellen Sie eine Komponente mit einer Liste von Zahlen von 0 bis 99.999:

@Component({
  template: `<div *ngFor="let item of list">{{item}}</div>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

Wenn der Browser die App rendert, müssen 100.000 einzelne <div> Elemente gerendert werden. Das mag für einfache Textknoten in Ordnung sein, aber jede Komplexität in der wiederholten Vorlage lässt sich nicht gut skalieren und alle Ereignis-Listener werden erheblich multipliziert.

Wenn Sie virtuelles Scrolling hinzufügen und diese Probleme vermeiden möchten, müssen Sie einen Viewport erstellen, indem Sie die Liste in ein <cdk-virtual-scroll-viewport> Element einschließen:

@Component({
  template: `<cdk-virtual-scroll-viewport>
    <div *ngFor="let item of list">{{item}}</div>
    </cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

Da ScrollingModule Teilmengen der Liste dynamisch rendert, müssen Sie die Höhe des Viewports mit Standard-CSS angeben. Sie müssen dem Viewport auch einen Hinweis auf seinen Inhalt geben, indem Sie itemSize angeben. Das Modul verwendet diese Informationen, um zu bestimmen, wie viele Elemente zu einem bestimmten Zeitpunkt im DOM bleiben und wie eine entsprechend große Scrollleiste gerendert wird.

@Component({
  template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
    <div *ngFor="let item of list">{{item}}</div>
    </cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

Konvertieren Sie schließlich *ngFor in *cdkVirtualFor:

@Component({
  template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
    <div *cdkVirtualFor="let item of list">{{item}}</div>
    </cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

Statt die gesamte Liste zu durchlaufen, identifiziert und durchläuft der Viewport dynamisch die richtige Teilmenge der Liste für den Nutzer. Wenn der Nutzer die Seite jetzt lädt, sollte das CDK die Teilmenge der Liste rendern, die auf den Bildschirm passt (plus ein kleiner Puffer). Bei allen Scrollereignissen im Viewport wird die entsprechende Teilmenge der Liste geladen und gerendert:

Weitere Informationen

Die virtuellen Scrollfunktionen des CDK gehen weit über dieses einfache Beispiel hinaus. In der Beispiel-App, war die gesamte Liste im Arbeitsspeicher, aber die Liste könnte bei komplexeren Anwendungen bei Bedarf abgerufen werden. Weitere Informationen zu den anderen Funktionen von ScrollingModule und der cdkVirtualOf Direktive finden Sie unter Scrolling in der CDK-Dokumentation.