Melakukan virtualisasi daftar besar dengan Angular CDK

Buat daftar besar lebih responsif dengan menerapkan scroll virtual.

Stephen Fluin

Daftar scroll adalah salah satu pola UI yang paling umum saat ini, baik itu 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 menurun.

Daftar besar dapat lambat dimuat karena aplikasi harus memuat dan merender semua data di awal. Proses rendering dan navigasinya juga bisa lambat 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 secara otomatis mengelola rendering virtual daftar Anda, sehingga meningkatkan performa dan responsivitas halaman.

Alih-alih merender seluruh daftar sekaligus, hanya subset item yang sesuai dengan layar (ditambah buffer kecil) yang akan dirender. Saat pengguna menjelajah, subset item baru akan dihitung dan dirender, dengan 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 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 pemroses peristiwa apa pun akan dikalikan secara signifikan.

Untuk menambahkan scroll virtual dan menghindari masalah tersebut, Anda perlu 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 tentang kontennya ke area pandang dengan menentukan itemSize. Modul ini menggunakan informasi ini untuk menentukan jumlah item yang akan disimpan di DOM pada waktu tertentu dan cara merender scrollbar dengan ukuran yang 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, konversikan *ngFor menjadi *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);
}

Alih-alih melakukan iterasi di 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 (ditambah sedikit buffering), dan setiap peristiwa scroll di area pandang akan memuat dan merender subset daftar yang sesuai:

CDK merender subset daftar saat pengguna men-scroll.

Mempelajari lebih lanjut

Kemampuan scroll virtual CDK jauh lebih luas daripada contoh dasar ini. Dalam aplikasi contoh, seluruh daftar berada dalam memori, tetapi daftar tersebut dapat diambil sesuai permintaan untuk aplikasi yang lebih kompleks. Anda dapat mempelajari lebih lanjut kemampuan lain dari ScrollingModule dan perintah cdkVirtualOf dengan membaca tentang Scrolling di dokumentasi CDK.