Mengidentifikasi dan Memperbaiki Hambatan
Profilkan dan atasi hambatan kinerja.
Mengidentifikasi dan Memperbaiki Hambatan adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. 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 Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.
Mengukur Sebelum Mengoptimalkan
Menebak bagian yang membuat aplikasi lambat hanya membuang waktu. Pendekatan profesional adalah mengukur terlebih dahulu, menemukan hambatan yang sebenarnya, memperbaikinya, lalu mengukur lagi. Vue DevTools dan alat pemrofilan browser adalah alat utama Anda.
Vue DevTools
Ekstensi browser Vue DevTools memungkinkan Anda memeriksa pohon komponen, keadaan reaktif, dan peristiwa. Tab Kinerja merekam waktu yang diperlukan komponen untuk dirender sehingga Anda dapat menemukan komponen yang lambat.
Menggunakan Tab Kinerja
Mulai perekaman, berinteraksilah dengan aplikasi Anda, lalu hentikan perekaman. DevTools menampilkan linimasa perenderan komponen. Komponen dengan bilah perenderan yang panjang atau sering muncul adalah tersangka utama Anda.
Alat Analisis Kinerja Browser
Panel Kinerja DevTools browser merekam seluruh halaman: eksekusi skrip, perenderan, dan penggambaran. Blok eksekusi skrip berwarna kuning yang panjang sering menunjukkan pekerjaan JavaScript yang berat selama perenderan.
Menemukan Perenderan Ulang Berlebihan
Hambatan kinerja yang umum adalah komponen dirender ulang jauh lebih sering daripada yang diharapkan. Jika perubahan kecil memicu perenderan ulang subpohon yang besar, periksa keadaan reaktif yang digunakan bersama atau batas komponen yang belum dibuat.
Perenderan Daftar Besar
Merender ribuan simpul DOM sekaligus berjalan lambat dan menghabiskan banyak memori. Jika daftar memiliki ratusan atau ribuan baris, DOM itu sendiri menjadi hambatan kinerja, bukan logika data Anda.
<!-- rendering 10,000 rows like this is expensive -->
<li v-for="row in tenThousandRows" :key="row.id">{{ row.name }}</li>Konsep Pengguliran Virtual
Pengguliran virtual hanya merender baris yang sedang terlihat di area pandang serta penyangga kecil, lalu menggunakan kembali simpul DOM saat pengguna menggulir. Daftar berisi 10.000 item hanya mempertahankan beberapa lusin simpul dalam DOM.
Menggunakan Pustaka Daftar Virtual
Pustaka seperti vue-virtual-scroller menerapkan hal ini untuk Anda. Anda memberikan seluruh data dan tinggi baris, lalu pustaka tersebut menangani pengaturan jendela tampilan.
import { RecycleScroller } from "vue-virtual-scroller"
// in template:
// <RecycleScroller :items="rows" :item-size="40" v-slot="{ item }">
// <div>{{ item.name }}</div>
// </RecycleScroller>Bug Perenderan Ulang Terkait Kunci
Menggunakan indeks larik sebagai :key dalam daftar dinamis dapat menyebabkan Vue menggunakan kembali simpul DOM secara keliru ketika item ditambahkan, dihapus, atau diurutkan ulang, sehingga menghasilkan konten yang salah dan perenderan ulang tambahan.
<!-- buggy: index keys break on reorder -->
<li v-for="(item, i) in items" :key="i">{{ item.name }}</li>Memperbaiki Bug Kunci
Gunakan pengenal yang stabil dan unik sebagai kunci agar Vue dapat mencocokkan elemen dengan data secara tepat di setiap pembaruan.
<!-- correct: stable id key -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>Alur Kerja Praktis
Terapkan semuanya: lakukan perekaman dengan DevTools, temukan komponen yang paling lambat, periksa perenderan ulang berlebihan atau daftar yang sangat besar, terapkan perbaikan yang tepat (penyimpanan hasil komputasi dalam cache, v-memo, pengguliran virtual, dan kunci stabil), lalu ukur kembali untuk memastikan peningkatannya.
Pemeriksaan Singkat
Uji pemahaman Anda tentang menemukan hambatan kinerja.
Ringkasan
Optimalkan aplikasi dengan mengukur terlebih dahulu menggunakan Vue DevTools dan alat pemrofilan browser, lalu menargetkan hambatan kinerja yang sebenarnya: perenderan ulang berlebihan, daftar yang sangat besar (diperbaiki dengan pengguliran virtual), dan bug kunci indeks (diperbaiki dengan kunci stabil). Selalu ukur kembali untuk memastikan hasilnya. Selanjutnya, Anda akan belajar menguji aplikasi Vue.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mengidentifikasi dan Memperbaiki Hambatan” gratis?
Ya — teks lengkap “Mengidentifikasi dan Memperbaiki Hambatan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “Mengidentifikasi dan Memperbaiki Hambatan”?
Profilkan dan atasi hambatan kinerja. Kamu berlatih Vue 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 Vue Academy?
Tidak diperlukan pengalaman sebelumnya. Vue 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 3 dari 3.
Berapa lama pelajaran “Mengidentifikasi dan Memperbaiki Hambatan” 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 Vue Academy ini?
Ya. Setiap pelajaran Vue 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
- Pemuatan Lambat dan Pemisahan Kode
- Teknik Memoisasi
- Mengidentifikasi dan Memperbaiki Hambatan