Gunakan Pemantauan performa untuk dengan cepat mendapatkan gambaran tentang pemuatan situs dan performa runtime.
Ringkasan
Panel Pemantauan performa menampilkan linimasa yang menampilkan grafik metrik performa secara real time. Klik metrik untuk menampilkan atau menyembunyikannya. Kemudian lihat bagaimana grafik berubah saat Anda berinteraksi dengan aplikasi.
Pemantau performa melacak metrik berikut:
- penggunaan CPU oleh semua pengguna.
- Ukuran heap JavaScript.
- Jumlah total simpul DOM, pemroses peristiwa JavaScript, dokumen, dan bingkai pada laman.
- Tata letak dan penghitungan ulang gaya per detik.
Membuka panel monitor Performa
Untuk membuka panel Pemantauan performa:
- Buka DevTools.
- Buka menu Command dengan menekan:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Mulai ketik
Performance monitor, pilih Tampilkan Performance monitor, lalu tekan Enter. DevTools menampilkan panel Performance monitor di bagian bawah jendela DevTools.
Atau, di pojok kanan atas, pilih more_vert Opsi lainnya > Alat lainnya > Pemantauan performa.
Menggunakan panel Monitor performa
Pemantauan performa memberikan gambaran umum tentang performa runtime situs Anda.
Mengamati perubahan nilai metrik saat Anda berinteraksi dengan situs dapat membuka peluang untuk peningkatan.
Fitur Pemantauan performa yang berguna adalah pemantauan performa yang terus ada di sepanjang navigasi halaman. Jadi, sebagai developer frontend, Anda dapat menghindari masalah seperti layout thrashing dengan membuka Performance monitor, men-scroll situs mereka, dan memperhatikan metrik DOM Nodes dan Tata Letak/dtk.
Jika pengguna melaporkan waktu pemuatan yang lambat di situs Anda, Pemantauan performa dapat membantu mengidentifikasi area masalah.
Misalnya, lonjakan penggunaan CPU yang besar dapat menyebabkan kode yang tidak efisien. Dan secara umum, jika halaman berisi pemroses peristiwa JS dalam jumlah besar, sebaiknya Anda memfaktorkan ulang kode dan mengurangi jumlah tersebut untuk mengosongkan memori.
Jika Anda baru mulai menganalisis performa, jalur yang direkomendasikan adalah menggunakan panel Lighthouse terlebih dahulu, lalu menyelidiki lebih lanjut menggunakan panel Performa atau Pemantauan performa.