Melakukan virtualisasi daftar besar dengan Angular CDK

Buat daftar besar lebih responsif dengan menerapkan scroll virtual.

Stephen Fluin
Stephen Fluin
X GitHub

Daftar scroll adalah salah satu pola UI paling umum saat ini, baik saat menjelajahi feed scroll tanpa batas di situs media sosial favorit Anda, atau menavigasi dasbor perusahaan. Jika daftar scroll menjadi sangat panjang (ratusan, ribuan, atau ratusan ribu item), performa aplikasi dapat terpengaruh.

Daftar besar dapat lambat dimuat karena aplikasi harus memuat dan merender semua data di awal. Daftar besar juga dapat lambat dirender dan dinavigasi karena setiap item dalam daftar dapat memiliki data lengkap , media, dan fungsi.

Pengguna dapat mengalami masalah saat memuat atau men-scroll halaman, yang menyebabkan frustrasi dan pengabaian halaman.

Scroll virtual di Angular dengan Component Dev Kit

Scroll virtual adalah teknik utama yang digunakan untuk mengatasi masalah skala ini. Scroll virtual memberikan kesan daftar yang sangat besar, dengan menyediakan scroll bar berukuran sesuai, dan kemampuan untuk menavigasi daftar tanpa mengharuskan aplikasi menyimpan seluruh daftar dalam memori atau merendernya di halaman.

Di Angular, scroll virtual disediakan oleh Component Dev Kit (CDK). Dengan mengubah cara Anda melakukan iterasi melalui daftar, dan dengan menyediakan beberapa parameter konfigurasi tambahan, scroll virtual CDK akan otomatis mengelola rendering virtual daftar Anda, sehingga meningkatkan performa dan responsivitas halaman.

Daripada merender seluruh daftar sekaligus, hanya subset item yang sesuai dengan layar (plus buffer kecil) yang akan dirender. Saat pengguna menavigasi, subset item baru akan dihitung dan dirender, menggunakan kembali DOM yang ada jika diinginkan.

Bagian selanjutnya dari postingan ini akan membahas cara menyiapkan scroll virtual dasar. Anda dapat melihat contoh lengkap yang berfungsi di aplikasi contoh ini:

Menyiapkan scroll virtual

Pertama, pastikan Anda telah menginstal @angular/cdk menggunakan pengelola paket favorit Anda. Untuk menginstalnya menggunakan npm, jalankan perintah ini di terminal:

npm install --save @angular/cdk

Menambahkan ScrollingModule ke aplikasi Anda

Setelah CDK diinstal, impor ScrollingModule, yang menangani scroll virtual, dari paket @angular/cdk/scrolling. Kemudian, tambahkan ke array impor modul Anda:

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

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

Membuat area pandang

Untuk melihat cara kerja paket, coba buat komponen dengan daftar angka dari 0 hingga 99.999:

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

Saat browser merender aplikasi, browser harus merender 100.000 elemen <div> individual. Hal ini mungkin tidak masalah untuk node teks dasar, tetapi kompleksitas apa pun dalam template berulang tidak akan diskalakan dengan baik, dan setiap pemroses peristiwa akan dikalikan secara signifikan.

Untuk menambahkan scroll virtual dan menghindari masalah tersebut, Anda harus membuat area pandang dengan menggabungkan daftar dalam elemen <cdk-virtual-scroll-viewport>:

@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);
}

Karena ScrollingModule merender subset daftar secara dinamis, Anda harus menentukan tinggi area pandang dengan CSS standar. Anda juga perlu memberikan petunjuk kepada area pandang tentang kontennya dengan menentukan itemSize. Modul ini menggunakan informasi ini untuk menentukan jumlah item yang akan disimpan di DOM pada waktu tertentu dan cara merender scroll bar berukuran sesuai.

@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);
}

Terakhir, konversi *ngFor ke *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);
}

Daripada melakukan iterasi melalui seluruh daftar, area pandang secara dinamis mengidentifikasi dan melakukan iterasi melalui subset daftar yang benar untuk pengguna. Sekarang, saat pengguna memuat halaman, CDK akan merender subset daftar yang sesuai dengan layar (plus sedikit buffer), dan setiap peristiwa scroll di area pandang akan memuat dan merender subset daftar yang sesuai:

CDK merender subset daftar saat pengguna men-scroll.

Melangkah lebih jauh

Kemampuan scroll virtual CDK jauh lebih canggih daripada contoh dasar ini. Di aplikasi contoh, seluruh daftar berada dalam memori, tetapi daftar dapat diambil sesuai permintaan untuk aplikasi yang lebih kompleks. Anda dapat mempelajari lebih lanjut kemampuan lainnya dari ScrollingModule dan direktif cdkVirtualOf dengan membaca tentang Scrolling dalam dokumentasi CDK.