Melakukan virtualisasi daftar besar dengan Angular CDK

Buat daftar besar menjadi lebih responsif dengan menerapkan scroll virtual.

Stephen Fluin

Daftar scroll adalah salah satu pola UI yang paling umum saat ini, baik saat menjelajahi feed yang terus-menerus di-scroll di situs media sosial favorit Anda, maupun saat membuka dasbor perusahaan. Jika daftar scroll menjadi sangat panjang (ratusan, ribuan, atau ratusan ribu item), performa aplikasi dapat menurun.

Daftar besar dapat memuat dengan lambat karena aplikasi harus memuat dan merender semua data di awal. Item juga bisa lambat saat dirender dan dibuka karena setiap item dalam daftar dapat memiliki data , media, dan fungsionalitas yang lengkap.

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

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 dengan ukuran yang tepat—dan kemampuan untuk menjelajahi daftar tanpa mengharuskan aplikasi untuk menyimpan seluruh daftar dalam memori atau merendernya pada 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.

Sebagai ganti merender seluruh daftar sekaligus, hanya sebagian item yang sesuai di layar (ditambah buffer kecil) yang akan dirender. Saat pengguna bernavigasi, subset item baru akan dihitung dan dirender, menggunakan kembali DOM yang ada jika diinginkan.

Bagian selanjutnya dari postingan ini akan memandu Anda 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 terinstal, 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 sederhana 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 sederhana, 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 melalui 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 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 di seluruh daftar, area pandang akan secara dinamis mengidentifikasi dan melakukan iterasi melalui subset daftar yang benar untuk pengguna. Sekarang, saat pengguna memuat halaman, CDK akan merender subkumpulan daftar yang sesuai di layar (ditambah sedikit buffering), dan setiap peristiwa scroll di area pandang akan memuat dan merender subkumpulan daftar yang sesuai:

CDK merender subset daftar saat pengguna men-scroll.

Lebih lanjut

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

Banner besar oleh Mr Cup / Fabien Barral di Unsplash.