Panel JavaScript Profiler akan dihentikan di Chrome 124. Ke depannya, gunakan panel Performance untuk membuat profil performa CPU Node.js.
Mengapa kami menghentikan penggunaan JavaScript Profiler? (JS Profiler)
Mulai Chrome 58, tim DevTools berencana untuk menghentikan JS Profiler. Ada beberapa alasan:
- Tidak lagi dikembangkan secara aktif. JS Profiler belum mendapatkan update besar selama beberapa tahun, dan tim mereka tidak memiliki resource untuk melanjutkan pengembangannya.
- Pengalaman pembuatan profil yang lebih sederhana. Panel Performa sudah digunakan untuk semua jenis analisis performa, dan dengan kemampuannya untuk membuat profil performa CPU JavaScript di Node.js, sangat masuk akal untuk menggabungkan semuanya di satu tempat demi konsistensi dan efisiensi.
- Panel Performa lebih baik. Kami terus meningkatkannya dengan menambahkan fitur dan peningkatan baru, menjadikannya alat yang lebih canggih dan mudah digunakan untuk analisis performa.
Apa yang harus Anda lakukan setelah penghentian penggunaan?
Untuk mempelajari lebih lanjut cara membuat profil performa CPU JavaScript, lihat performa Profil Node.js.
Berikut beberapa tips untuk menggunakan panel Performa:
- Gunakan flame chart untuk mengidentifikasi bottleneck performa.
- Gunakan tab Bottom-up dan Hierarki panggilan untuk memahami hubungan antarfungsi.
Bagaimana cara menangani penghentian penggunaan ini?
Kami mengembangkan prototipe dan memublikasikan Request for Comments (RFC) secara publik di GitHub untuk meminta masukan dari developer.
Selain itu, kami secara aktif menghubungi pakar developer untuk menguji prototipe, menangani setiap kekhawatiran atau masalah guna memastikan bahwa panel Performa memenuhi kebutuhan pembuatan profil inti.
Kami secara bertahap menghentikan JS Profiler dalam 4 tahap agar developer memiliki cukup waktu untuk melakukan penyesuaian dan adopsi.
Masalah utama dan cara kami memperbaikinya
Di antara masukan yang kami terima, masalah yang paling mendesak berpusat di sekitar tiga masalah utama:
- Mendukung format file
.cpuprofile. JS Profiler menggunakan format file yang berbeda. Panel Performance akan mendukungnya. - Kecepatan pemuatan lambat. Kecepatan pemuatan panel tampak lambat, sehingga mengganggu proses pembuatan profil.
- Pemilih JavaScript VM tidak ada. Tidak adanya pemilih instance VM JavaScript akan membatasi kemampuan pembuatan profil dalam skenario tertentu.
Mari kita lihat setiap masalah tersebut dan lihat bagaimana kami memperbaikinya.
Kecepatan pemuatan lambat
Para developer memberi tahu kami bahwa panel Performance membutuhkan waktu terlalu lama untuk memuat file data berukuran besar dan terkadang bahkan error.
Kita menggunakan DevTools untuk menganalisis DevTools (kami menyebutnya "DevTools-on-DevTools"). Kami menemukan masalah dan melakukan beberapa pengoptimalan:
- Mengganti
Setdengan struktur dataArray. - Menghapus struktur data
Mapyang tidak perlu. - Memfaktorkan ulang fungsi rekursif menjadi iteratif (untuk loop) untuk mengurangi penggunaan stack memori.
Dengan memperbaiki bottleneck ini, kami mempercepat pemuatan file berukuran besar 80%. 🎉
Baca selengkapnya mengenai hal yang kami pelajari dalam postingan blog ini: Panel Performa yang 400% lebih cepat melalui penerimaan performa.
Pemilih VM JavaScript tidak ada
Prototipe awal tidak memiliki pemilih JavaScript VM. Developer menggunakannya untuk melihat perincian dan berfokus pada analisis instance VM tertentu.
Sekarang kita telah menambahkan pemilih VM JavaScript ke panel Performa. Menu ini akan menampilkan menu drop-down dari semua instance VM JavaScript yang tersedia. Saat Anda memilih instance, panel Performance akan memuat profil CPU untuk instance tertentu tersebut.
Mendukung format file cpuprofile
Sebelumnya, panel Performance hanya mendukung file rekaman aktivitas, yang merupakan file JSON dengan serangkaian peristiwa rekaman aktivitas.
Di sisi lain, JS Profiler mendukung profil CPU, yang merupakan file dengan ekstensi .cpuprofile yang berisi objek JSON. Tombolnya akan terlihat seperti ini:
{
// The list of profile nodes. First item is the root node.
nodes: ProfileNode[];
// Profiling start timestamp in microseconds.
startTime: number;
// Profiling end timestamp in microseconds.
endTime: number;
// Ids of samples at top nodes.
samples?: integer[];
// Time intervals between adjacent samples in microseconds.
// The first delta is relative to the profile startTime.
timeDeltas?: integer[];
}
Alur kerja baru seharusnya tidak mencegah developer menganalisis cpuprofile yang ada. Oleh karena itu, panel Performance kini mendukung file rekaman aktivitas dan profil CPU. Anda dapat mengimpor file cpuprofile ke dalam Performance dan file akan dimuat dengan benar.
Di balik layar, kami mendeteksi perbedaan struktur objek dengan menggunakan ekspresi reguler. Jika konten file diawali dengan {"nodes":[, berarti itu adalah profil CPU. Jika tidak, file tersebut adalah file rekaman aktivitas.
Setelah jenis konten teridentifikasi, kami akan memprosesnya sebagaimana mestinya. Untuk file rekaman aktivitas, kami akan mengurai peristiwa dan membuat linimasa. Untuk profil CPU, kita akan mengurai objek JSON dan membuat flame chart.
Kesimpulan
Gunakan panel Performance untuk pengalaman pembuatan profil yang lebih sederhana, baik untuk situs maupun pembuatan profil performa CPU di aplikasi Node.js dan Deno.
Jika Anda memiliki masukan atau saran, tambahkan komentar ke bug ini atau hubungi kami menggunakan salah satu opsi berikut.
Mendownload saluran pratinjau
Pertimbangkan untuk menggunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, menguji API platform web mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.
Menghubungi tim Chrome DevTools
Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait dengan DevTools.
- Kirim saran atau masukan kepada kami melalui crbug.com.
- Laporkan masalah DevTools menggunakan Opsi lainnya
> Bantuan > Laporkan masalah DevTools di DevTools. - Tweet di @ChromeDevTools.
- Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.