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. Saat daftar scroll menjadi sangat panjang (ratusan, ribuan, atau ratusan ribu item), performa aplikasi dapat terpengaruh.

Daftar besar dapat memuat dengan lambat karena aplikasi harus memuat dan merender semua data di awal. Daftar juga dapat lambat dirender dan dijelajahi karena setiap item dalam daftar dapat memiliki data , media, dan fungsi yang beragam.

Pengguna dapat mengalami masalah saat memuat atau men-scroll halaman, yang menyebabkan rasa 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.

Alih-alih merender seluruh daftar sekaligus, hanya sebagian item yang sesuai di layar (ditambah buffer kecil) yang akan dirender. Saat pengguna menavigasi, subset item baru 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 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 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 memberi 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 melalui seluruh daftar, area pandang akan mengidentifikasi dan melakukan iterasi secara dinamis pada subset daftar yang benar untuk pengguna. Sekarang, saat pengguna memuat halaman, CDK akan merender subset daftar yang sesuai di 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.

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 tentang Scrolling di dokumentasi CDK.

Banner besar oleh Mr Cup / Fabien Barral di Unsplash.