Große Listen lassen sich durch die Implementierung von virtuellem Scrollen reaktionsschneller gestalten.
Die scrollbare Liste ist heute eines der gängigsten UI-Muster, sei es beim Durchsuchen eines unendlich scrollbaren Feeds auf Ihrer bevorzugten Social-Media-Website oder beim Navigieren in einem Unternehmens-Dashboard. Wenn Scrolllisten sehr lang werden (Hunderte, Tausende oder Hunderttausende von Elementen), kann die Anwendungsleistung beeinträchtigt werden.
Das Laden großer Listen kann langsam sein, da die Anwendung alle Daten im Voraus laden und rendern muss. Außerdem kann das Rendern und Navigieren langsam sein , da jedes Element in der Liste Rich-Daten, Medien und Funktionen enthalten kann.
Nutzer können beim Laden oder Scrollen der Seite Probleme haben, was zu Frustration und zum Verlassen der Seite führen kann.
Virtuelles Scrollen in Angular mit dem Component Dev Kit
Virtuelles Scrollen ist die wichtigste Technik, um diese Skalierungsprobleme zu beheben. Virtuelles Scrollen vermittelt den Eindruck einer sehr großen Liste, da eine Bildlaufleiste mit entsprechender Größe bereitgestellt wird und die Liste durchsucht werden kann, ohne dass die Anwendung die gesamte Liste im Speicher halten oder auf der Seite rendern muss.
In Angular wird das virtuelle Scrollen vom Component Dev Kit (CDK) bereitgestellt. Wenn Sie die Art und Weise ändern, wie Sie Listen durchlaufen, und einige zusätzliche Konfigurationsparameter angeben, wird das virtuelle Rendering Ihrer Listen automatisch vom virtuellen Scrollen des CDK verwaltet. Dadurch werden die Seitenleistung und die Reaktionsfähigkeit verbessert.
Anstatt die gesamte Liste auf einmal zu rendern, wird nur ein Teil 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. Dabei wird das vorhandene DOM bei Bedarf wiederverwendet.
Im weiteren Verlauf dieses Beitrags wird beschrieben, wie Sie einfaches virtuelles Scrollen einrichten. Ein vollständiges, funktionierendes Beispiel finden Sie in dieser Beispiel-App:
Virtuelles Scrollen 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
Nachdem Sie das CDK installiert haben, importieren Sie ScrollingModule, das das virtuelle Scrollen übernimmt, aus dem Paket @angular/cdk/scrolling. Fügen Sie es dann dem Import-Array Ihres Moduls hinzu:
import {ScrollingModule} from '@angular/cdk/scrolling';
...
imports: [
ScrollingModule
...
]
...
Darstellungsbereich 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, muss er 100.000 einzelne <div>-Elemente rendern. Für einfache Textknoten ist das vielleicht in Ordnung, aber bei komplexeren wiederholten Vorlagen ist das nicht gut skalierbar und die Anzahl der Event-Listener wird erheblich erhöht.
Wenn Sie virtuelles Scrollen hinzufügen und diese Probleme vermeiden möchten, müssen Sie einen Darstellungsbereich erstellen, indem Sie die Liste in ein <cdk-virtual-scroll-viewport>-Element einfügen:
@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 Darstellungsbereichs mit Standard-CSS angeben. Außerdem müssen Sie dem Darstellungsbereich 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 beibehalten werden sollen und wie eine Bildlaufleiste mit der richtigen Größe gerendert werden soll.
@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);
}
Anstatt die gesamte Liste zu durchlaufen, identifiziert der Darstellungsbereich dynamisch die richtige Teilmenge der Liste für den Nutzer und durchläuft sie. Wenn der Nutzer die Seite lädt, sollte das CDK die Teilmenge der Liste rendern, die auf den Bildschirm passt (plus ein wenig Puffer). Bei Scroll-Ereignissen im Darstellungsbereich wird die entsprechende Teilmenge der Liste geladen und gerendert:
Weiterführende Informationen
Die virtuellen Scrollfunktionen des CDK gehen weit über dieses einfache Beispiel hinaus. In der Beispiel-App befand sich die gesamte Liste im Arbeitsspeicher. Bei komplexeren Anwendungen könnte die Liste jedoch bei Bedarf abgerufen werden. Weitere Informationen zu den anderen Funktionen von ScrollingModule und der Anweisung cdkVirtualOf finden Sie in der CDK-Dokumentation unter Scrolling.