Mengoptimalkan Daftar dan Rendering
Percepat daftar besar dengan pelacakan.
Mengoptimalkan Daftar dan Rendering adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Mengapa Perenderan Daftar Penting
Daftar adalah sumber masalah performa yang paling umum. Merender ulang seluruh daftar pada setiap perubahan membuang pekerjaan dan mengatur ulang keadaan DOM. Angular menyediakan berbagai alat untuk merender secara efisien.
Blok @for
Alur kontrol bawaan @for memerlukan ekspresi track agar Angular dapat mengidentifikasi setiap item di antara pembaruan.
@for (item of items(); track item.id) {
<li>{{ item.name }}</li>
}Mengapa track Diperlukan
Tanpa identitas yang stabil, Angular tidak dapat mengetahui item mana yang berpindah, ditambahkan, atau dihapus. track memetakan setiap simpul yang dirender ke datanya sehingga DOM dapat digunakan kembali, bukan dibuat ulang.
Melacak Berdasarkan Identitas
Gunakan kunci unik dan stabil, seperti id. Hindari track $index untuk daftar yang dapat diurutkan ulang, karena perubahan indeks menyebabkan perubahan DOM yang tidak perlu.
@for (user of users(); track user.id) {
<app-user-card [user]="user" />
}track $index Saat Sesuai
Jika item tidak memiliki id unik dan tidak pernah diurutkan ulang (log yang hanya ditambahkan), track $index dapat digunakan.
@for (line of logLines(); track $index) {
<p>{{ line }}</p>
}trackBy Lama
Dengan *ngFor lama, Anda menyediakan fungsi trackBy yang mengembalikan kunci stabil.
trackById(index: number, item: Item) {
return item.id;
}trackBy dalam Templat
Referensikan fungsi tersebut dalam sintaks mikro *ngFor.
<li *ngFor="let item of items; trackBy: trackById">
{{ item.name }}
</li>Keadaan Kosong dan Memuat
@for mendukung blok @empty saat koleksi kosong, sehingga pemeriksaan *ngIf tambahan tidak diperlukan.
@for (item of items(); track item.id) {
<li>{{ item.name }}</li>
} @empty {
<li>No items yet.</li>
}Hindari Pemanggilan Fungsi dalam Pengikatan
Fungsi dalam templat dijalankan pada setiap pemeriksaan. Hitung nilai terlebih dahulu ke dalam sinyal atau bidang yang di-memoisasi, alih-alih memanggil metode dalam isi @for.
OnPush + Daftar yang Tidak Dapat Diubah
Padukan OnPush dengan referensi larik baru pada setiap perubahan. Dengan track yang tepat, Angular hanya memperbarui baris yang benar-benar berubah.
this.items.update(list => [...list, newItem]);Pengguliran Virtual
Untuk daftar yang sangat besar, render hanya baris yang terlihat dengan CDK cdk-virtual-scroll-viewport, sehingga DOM tetap kecil terlepas dari ukuran data.
<cdk-virtual-scroll-viewport itemSize="48">
<div *cdkVirtualFor="let item of items">
{{ item.name }}
</div>
</cdk-virtual-scroll-viewport>Pemeriksaan Singkat
Uji pemahaman Anda tentang pengoptimalan daftar.
Ringkasan
Anda telah mempelajari cara mengoptimalkan daftar dengan @for ... track (atau trackBy lama) menggunakan kunci stabil, blok @empty, pembaruan yang tidak dapat diubah dengan OnPush, serta pengguliran virtual untuk koleksi yang sangat besar.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mengoptimalkan Daftar dan Rendering” gratis?
Ya — teks lengkap “Mengoptimalkan Daftar dan Rendering” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Mengoptimalkan Daftar dan Rendering”?
Percepat daftar besar dengan pelacakan. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Mengoptimalkan Daftar dan Rendering” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Cara Kerja Deteksi Perubahan
- Deteksi Perubahan OnPush
- Angular Tanpa Zona
- Mengoptimalkan Daftar dan Rendering