Meningkatkan waktu memulai DevTools

Maksim Sadym
Maksim Sadym
X GitHub

Startup DevTools kini ~13% lebih cepat 🎉 (dari 11,2 detik menjadi 10 detik)

TL;DR; Hasilnya dicapai dengan menghapus serialisasi yang redundan.

Ringkasan

Saat memulai, DevTools perlu melakukan beberapa panggilan ke mesin JavaScript V8.

Proses memulai DevTools

Mekanisme yang digunakan Chromium untuk mengirim perintah DevTools ke V8 (dan untuk IPC secara umum) disebut mojo. Rekan kerja saya, Benedikt Meurer dan Sigurd Schneider, menemukan inefisiensi saat mengerjakan tugas lain, dan mendapatkan ide untuk meningkatkan proses dengan menghapus dua langkah yang tidak diperlukan dalam cara pesan ini dikirim dan diterima.

Mari kita pelajari cara kerja mekanisme mojo.

Mekanisme mojo

Mekanisme mojo

Ada perintah mojo EvaluateScript yang menjalankan perintah JS. Fungsi ini melakukan serialisasi seluruh perintah JS termasuk arguments menjadi string kode sumber JavaScript yang dapat berupa eval(). Seperti yang dapat Anda bayangkan, string ini bisa menjadi cukup panjang dan mahal. Setelah perintah diterima oleh V8, string kode JavaScript ini akan dideserialisasi sebelum dijalankan. Proses serialisasi dan deserialisasi untuk setiap pesan ini menghasilkan overhead yang signifikan.

Benedikt Meurer menyadari bahwa serialisasi dan deserialisasi arguments cukup mahal, dan bahwa seluruh langkah "Serialize JS command to JS string" dan "Deserialize JS string" bersifat redundan dan dapat dilewati.

Detail teknis: RenderFrameHostImpl::ExecuteJavaScript

Cara kami meningkatkan kualitas

Mekanisme yang ditingkatkan

Kami memperkenalkan metode mojo API lain yang memungkinkan kita meneruskan nama objek, metode yang akan dipanggil, dan daftar argumen secara langsung, tanpa harus membuat string kode sumber JavaScript. Hal ini memungkinkan kita melewati serialisasi & deserialisasi, dan menghilangkan kebutuhan untuk mengurai kode JavaScript.

Untuk detail teknis tentang cara kami menerapkan pengoptimalan ini, lihat dua patch berikut:

  1. CL 2431864: [devtools] Mengurangi overhead performa pengiriman pesan di frontend
  2. CL 2442012: [devtools] Menggunakan ExecuteJavaScriptMethod di DevTools

Dampak

Untuk mengukur efektivitas perubahan, kami menjalankan beberapa pengukuran yang membandingkan revisi Chromium cb971089a058 dan 4f213b39d581 (sebelum dan setelah perubahan).

Untuk kedua revisi tersebut, kami menjalankan skenario berikut 5 kali:

  1. Merekam aktivitas menggunakan chrome://tracing
  2. Membuka DevTools-on-DevTools
  3. Dapatkan rekaman aktivitas CrRendererMain dan bandingkan metrik khusus V8.

Berdasarkan eksperimen ini, DevTools terbuka ~13% lebih cepat (dari 11,2 detik menjadi 10 detik) dengan pengoptimalan.

Sorotan, durasi CPU

Nama metode Tidak dioptimalkan (md) Dioptimalkan (md) Perbedaan (md) Peningkatan kecepatan (%)
Total 11.213,19 9.953,99 -1.259,20 12,65%
v8.run 499,67 3,61 -496,06 12,65%
V8.Execute 1.654,87 1.349,61 -305,25 3,07%
v8.callFunction 1.171,84 1.339,77 167,94 -1,69%
v8.compile 133,93 3,56 -130,37 1,31%

Waktu CPU pemuatan DevTools (md)

Tabel perbandingan metrik pelacakan lengkap

Akibatnya, DevTools akan terbuka dan berfungsi lebih cepat dengan lebih sedikit penggunaan CPU. 🎉

Mendownload saluran pratinjau

Sebaiknya gunakan 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.