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 paling umum saat ini, baik itu menjelajahi feed scrolling tanpa batas di situs media sosial favorit Anda, atau menavigasi dasbor perusahaan. Ketika daftar scroll menjadi sangat panjang (ratusan, ribuan, atau ratusan ribu item), performa aplikasi dapat menurun.

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

Pengguna dapat mengalami masalah saat memuat atau men-scroll halaman, sehingga berujung pada rasa frustrasi dan pengabaian halaman.

Scroll virtual di Angular dengan Component Dev Kit

Pengguliran virtual adalah teknik utama yang digunakan untuk mengatasi masalah skala ini. Scroll virtual memberi kesan daftar yang sangat besar—dengan menyediakan scroll bar yang berukuran tepat—dan kemampuan untuk menavigasi daftar tanpa mengharuskan aplikasi menyimpan seluruh daftar dalam memori atau merendernya pada halaman.

Di Angular, scroll virtual disediakan oleh Component Dev Kit (CDK). Dengan memodifikasi 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.

Daripada merender seluruh daftar dalam satu waktu, hanya subset item yang sesuai di layar (ditambah buffer kecil) yang akan dirender. Saat pengguna melakukan navigasi, subkumpulan item baru 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 yang berfungsi lengkap 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

Tambahkan 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 browser merender aplikasi, browser harus merender 100.000 elemen <div> individual. Ini mungkin tidak masalah untuk node teks sederhana, tetapi kompleksitas apa pun dalam template berulang tidak akan diskalakan dengan baik, dan setiap pemroses peristiwa akan berlipat ganda secara signifikan.

Untuk menambahkan scroll virtual dan menghindari masalah tersebut, Anda perlu membuat area tampilan 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 subkumpulan daftar secara dinamis, Anda harus menentukan tinggi area tampilan melalui CSS standar. Anda juga perlu memberikan petunjuk pada area pandang tentang kontennya dengan menentukan itemSize. Modul ini menggunakan informasi ini untuk menentukan jumlah item yang disimpan dalam 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);
}

Alih-alih mengiterasi seluruh daftar, area pandang akan secara dinamis mengidentifikasi dan melakukan iterasi melalui subset daftar yang benar untuk pengguna. Sekarang, saat pengguna memuat halaman, CDK harus merender subset daftar yang pas di layar (ditambah sedikit buffer), dan setiap peristiwa scroll di area pandang akan dimuat dan merender subset yang sesuai dari daftar:

Melangkah lebih jauh

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

Banner besar oleh Mr Cup / Fabien Barral di Unsplash.