Selamat tinggal JS Profiler, pembuatan profil CPU dengan panel Performance

Jecelyn Yeen

Nancy Li

Panel JavaScript Profiler akan dihapus di Chrome 124. Selanjutnya, gunakan panel Performa untuk membuat profil performa CPU Node.js.

Mengapa kami menghentikan penggunaan JavaScript Profiler? (JS Profiler)

Mulai Chrome 58, tim DevTools berencana untuk menghentikan penggunaan JS Profiler. Ada beberapa alasannya:

• Laporan ini tidak lagi dikembangkan secara aktif. JS Profiler belum menerima update besar dalam beberapa tahun, dan tim tidak memiliki sumber daya untuk melanjutkan pengembangannya.
• Pengalaman pembuatan profil yang lebih sederhana. Panel Performance sudah digunakan untuk semua jenis analisis performa, dan dengan kemampuannya untuk membuat profil performa CPU JavaScript di Node.js, cukup masuk akal untuk mengonsolidasikan semuanya di satu tempat untuk menjaga konsistensi dan efisiensi.
• Panel Performa lebih baik. Kami terus menyempurnakannya dengan menambahkan fitur dan penyempurnaan baru, menjadikannya alat yang lebih canggih dan mudah digunakan untuk analisis performa.

Apa yang harus Anda lakukan setelah penghentian?

Untuk mempelajari lebih lanjut cara memprofilkan performa CPU JavaScript, lihat Membuat profil performa Node.js.

Berikut adalah beberapa tips untuk menggunakan panel Performa:

• Gunakan flame chart untuk mengidentifikasi bottleneck performa.

• Gunakan tab Bottom-up dan Hierarki panggilan untuk memahami hubungan antar-fungsi.

Bagaimana cara menangani penghentian layanan?

Kami mengembangkan prototipe dan memublikasikan Request for Comments (RFC) secara publik di GitHub untuk mendapatkan masukan dari para developer.

Selain itu, kami secara aktif menghubungi pakar developer untuk menguji prototipe, menangani setiap masalah atau masalah untuk memastikan bahwa panel Performance memenuhi kebutuhan pembuatan profil inti.

Kami secara bertahap menghentikan JS Profiler dalam 4 tahap agar developer memiliki cukup waktu untuk menyesuaikan dan mengadopsi.

Masalah utama dan cara kami memperbaikinya

Di antara masukan yang kami terima, masalah yang paling mendesak dan berpusat pada tiga masalah utama:

• Mendukung format file .cpuprofile. JS Profiler menggunakan format file yang berbeda. Panel Performance harus mendukungnya.
• Kecepatan pemuatan lambat. Kecepatan pemuatan panel tampak lambat, sehingga mengganggu proses pembuatan profil.
• Pemilih VM JavaScript tidak ada. Tidak adanya pemilih instance VM JavaScript membatasi kemampuan pembuatan profil dalam skenario tertentu.

Mari kita lihat setiap masalah ini dan lihat bagaimana cara kami memperbaikinya.

Kecepatan pemuatan lambat

Developer memberi tahu kami bahwa panel Performance membutuhkan waktu terlalu lama untuk memuat file data berukuran besar dan terkadang bahkan error.

Kami menggunakan DevTools untuk menganalisis DevTools (kami menyebutnya "DevTools-on-DevTools"). Kami menemukan masalah dan melakukan beberapa pengoptimalan:

• Mengganti Set dengan struktur data Array.
• Menghapus struktur data Map yang tidak diperlukan.
• Memfaktorkan ulang fungsi rekursif ke iteratif (for loop) untuk mengurangi penggunaan stack memori.

Dengan memperbaiki bottleneck ini, kami menjadikan pemuatan 80% lebih cepat untuk file besar. 🎉

Baca selengkapnya tentang hal yang kami pelajari dalam postingan blog ini: Panel Performa yang 400% lebih cepat melalui performa.

Pemilih VM JavaScript tidak ada

Prototipe awal tidak memiliki pemilih VM JavaScript. Developer menggunakannya untuk melihat perincian dan berfokus pada analisis instance VM tertentu.

Sekarang kami telah menambahkan pemilih VM JavaScript ke panel Performance. Ini menunjukkan menu drop-down dari semua instance VM JavaScript yang tersedia. Saat Anda memilih instance, panel Performa 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 array peristiwa rekaman aktivitas.

Di sisi lain, JS Profiler mendukung profil CPU, yang merupakan file dengan ekstensi .cpuprofile yang berisi objek JSON. Tampilannya 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 tidak boleh mencegah developer menganalisis cpuprofile yang ada. Oleh karena itu, panel Performa kini mendukung file rekaman aktivitas dan profil CPU. Anda dapat mengimpor file cpuprofile ke Performance dan file tersebut akan dimuat dengan benar.

Di balik layar, kami mendeteksi perbedaan struktur objek dengan menggunakan ekspresi reguler. Jika konten file dimulai dengan {"nodes":[, berarti konten file tersebut adalah profil CPU. Jika tidak, itu adalah file rekaman aktivitas.

Setelah jenis konten teridentifikasi, kami akan memprosesnya. Untuk file rekaman aktivitas, kita mengurai peristiwa dan membuat linimasa. Untuk profil CPU, kita 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 ada masukan atau saran, tambahkan komentar ke bug ini atau hubungi 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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan 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.
• Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.