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.
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
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
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:
- CL 2431864: [devtools] Mengurangi overhead performa pengiriman pesan di front-end
- 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:
- Rekam aktivitas menggunakan
chrome://tracing
- Membuka DevTools-on-DevTools
- 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% |
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 > Bantuan > Laporkan masalah DevTools di DevTools.
- Tweet di @ChromeDevTools.
- Tuliskan komentar di video YouTube Yang baru di DevTools atau video YouTube di DevTools.