Meningkatkan waktu memulai DevTools

Maksim Sadym
Maksim Sadym
X GitHub

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

TL;DR; Hasilnya 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, Benikt Meurer dan Sigurd Schneider, menemukan inefisiensi saat mengerjakan tugas lain, dan mereka mendapatkan ide untuk meningkatkan prosesnya dengan menghapus dua langkah yang berlebihan terkait 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. Kode ini melakukan serialisasi seluruh perintah JS termasuk arguments ke dalam string kode sumber JavaScript yang dapat berupa eval(). Seperti yang Anda bayangkan, {i>string<i} ini bisa menjadi sangat panjang dan mahal. Setelah perintah diterima oleh V8, string kode JavaScript ini akan dideserialisasi sebelum berjalan. Proses serialisasi dan deserialisasi untuk setiap pesan menciptakan {i>overhead<i} yang signifikan.

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

Detail teknis: RenderFrameHostImpl::ExecuteJavaScript

Cara kami meningkatkan

Mekanisme yang ditingkatkan

Kami memperkenalkan metode API mojo lain yang memungkinkan kami 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, serta menghilangkan kebutuhan untuk mengurai kode JavaScript.

Untuk 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] Gunakan ExecuteJavaScriptMethod di DevTools

Dampak

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

Untuk kedua revisi, kami menjalankan skenario berikut 5 kali:

  1. Rekam aktivitas menggunakan chrome://tracing
  2. Buka DevTools-on-DevTools
  3. Dapatkan rekaman aktivitas CrRendererMain yang direkam dan bandingkan metrik khusus V8.

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

Highlight, 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 penggunaan CPU yang lebih sedikit. 🎉

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   Lainnya   > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.