Meningkatkan waktu memulai DevTools

Sadim Maksim
Maksim Sadym

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

TL;DR; Hasil ini dicapai dengan menghapus serialisasi redundan.

Ringkasan

Saat dimulai, 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 tim saya, Benedikt Meurer dan Sigurd Schneider, menemukan adanya inefisiensi saat mengerjakan tugas lain, dan kami menemukan sebuah ide untuk memperbaiki prosesnya dengan menghapus dua langkah redundan terkait pengiriman dan penerimaan pesan tersebut.

Mari kita pelajari cara kerja mekanisme mojo.

Mekanisme mojo

Mekanisme mojo

Ada perintah mojo EvaluateScript yang menjalankan perintah JS. Kode ini menserialisasi seluruh perintah JS termasuk arguments ke dalam string kode sumber JavaScript yang dapat berupa eval(). Seperti yang dapat Anda bayangkan, {i>string<i} ini bisa menjadi sangat 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 "Menserialisasikan perintah JS ke string JS" dan "Deserialisasi string JS" berlebihan dan dapat dilewati.

Detail teknis: RenderFrameHostImpl::ExecuteJavaScript

Cara kami melakukan peningkatan

Mekanisme yang ditingkatkan

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

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

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

Dampak

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

Untuk kedua revisi, kita menjalankan skenario berikut 5 kali:

  1. Rekam 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 perekaman aktivitas lengkap

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

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 ini, atau hal lain yang terkait dengan DevTools.

  • Kirim saran atau masukan kepada kami melalui crbug.com.
  • Laporkan masalah DevTools menggunakan Opsi lainnya   Lainnya   > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Tuliskan komentar di video YouTube Yang baru di DevTools atau video YouTube di DevTools.