Selamat tinggal JS Profiler, pembuatan profil CPU dengan panel Performance

Jecelyn Yeen
Nancy Li
Nancy Li
LinkedIn

Panel JavaScript Profiler akan dihentikan di Chrome 124. Ke depannya, gunakan panel Performa untuk membuat profil performa CPU Node.js.

Mengapa kami menghentikan penggunaan Profiler JavaScript? (JS Profiler)

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

  • Aplikasi ini tidak lagi dikembangkan secara aktif. JS Profiler belum menerima update besar selama beberapa tahun, dan tim tidak memiliki resource untuk terus mengembangkannya.
  • 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, sebaiknya gabungkan semuanya di satu tempat untuk konsistensi dan efisiensi.
  • Panel Performa lebih baik. Kami terus meningkatkan kualitasnya dengan menambahkan fitur dan peningkatan baru, sehingga menjadikannya alat yang lebih canggih dan mudah digunakan untuk analisis performa.

Apa yang harus Anda lakukan setelah penghentian?

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

Berikut beberapa tips untuk menggunakan panel Performa:

  • Gunakan diagram api untuk mengidentifikasi bottleneck performa.

Flame chart.

  • Gunakan tab Bottom-up dan Call tree untuk memahami hubungan antar-fungsi.

Tab Bottom-up.

Tab Hierarki panggilan.

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, mengatasi masalah atau kekhawatiran apa pun untuk memastikan panel Performa memenuhi kebutuhan pembuatan profil inti.

Kami akan menghentikan penggunaan JS Profiler secara bertahap dalam 4 tahap untuk memberi developer cukup waktu untuk menyesuaikan dan mengadopsinya.

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 Performa akan mendukungnya.
  • Kecepatan pemuatan lambat. Kecepatan pemuatan panel tampak lambat, sehingga mengganggu proses pembuatan profil.
  • Tidak ada pemilih JavaScript VM. Tidak adanya pemilih instance JavaScript VM 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.

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 menjadi iteratif (loop for) untuk mengurangi penggunaan stack memori.

Dengan memperbaiki bottleneck ini, kami membuat 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 perf-ception.

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, kami 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 Performa akan memuat profil CPU untuk instance tertentu tersebut.

Tab Hierarki panggilan.

Mendukung format file cpuprofile

Sebelumnya, panel Performa hanya mendukung file rekaman aktivitas, yaitu 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 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 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 diidentifikasi, kami akan memprosesnya sebagaimana mestinya. Untuk file rekaman aktivitas, kami akan mengurai peristiwa dan membuat linimasa. Untuk profil CPU, kita mengurai objek JSON dan membuat diagram api.

Kesimpulan

Gunakan panel Performa 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, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.