Gunakan Chrome untuk melakukan analisis kinerja pada Wasm yang dibuat oleh MoonBit

Di blog sebelumnya, kami memperkenalkan cara menggunakan perpustakaan Wasm Cmark yang didukung oleh MoonBit di JavaScript front-end. Pada artikel ini, kita akan mempelajari cara membuat profil perpustakaan ini langsung dari browser Chrome. Kami berharap tutorial ini akan memberi Anda beberapa wawasan dalam mengembangkan skenario serupa menggunakan MoonBit, sehingga mencapai kinerja keseluruhan yang lebih baik.

Secara khusus, dalam artikel ini, kami akan fokus pada cara memodifikasi contoh sebelumnya menggunakan Cmark di aplikasi front-end untuk menerapkan profil V8 bawaan Chrome ke kode Wasm Cmark.

Kita dapat dengan mudah memfaktorkan ulang aplikasi front-end asli dan menambahkan bilah navigasi baru untuk memuat tautan “Demo” dan “Profil”. Mengklik tautan pertama akan menyebabkan browser menerjemahkan aslinya Tur MoonBit untuk Pemula HTML misalnya, mengklik link kedua akan menavigasi ke dokumentasi baru kami untuk pembuatan profil. (Jika Anda tertarik dengan implementasi sebenarnya, Anda dapat menemukan link ke kode final di akhir artikel ini.)

Sekarang, kami siap menulis beberapa kode untuk implementasi profil Wasm. Jadi, apakah ada perbedaan antara pembuatan profil Wasm dibandingkan dengan pembuatan profil JavaScript?

Faktanya, kita dapat menggunakan API yang sama dengan JavaScript untuk membuat profil Wasm. Ada artikel di dokumentasi Chromium yang menjelaskan API ini secara detail:

• Saat kita menelepon console.profile() V8 Performance Analyzer akan mulai merekam profil kinerja CPU;
• Setelah itu, kita dapat memanggil fungsi kritis kinerja yang ingin kita analisis;
• Akhirnya, ketika kami menelepon console.profileEnd() Ketika , Performance Analyzer akan berhenti mencatat dan menampilkan data hasil visual di tab Performance Chrome.

Dengan mengingat hal ini, mari kita lihat implementasi sebenarnya dari fitur profil:

async function profileView() {
  const docText = await fetchDocText("../public/spec.md");
  console.profile();
  const res = cmarkWASM(docText);
  console.profileEnd();
  return (
    `<h2>Note</h2>
<p>
  <strong
    >Open your browser's
    <a
      href="
      rel="nofollow"
      >Performance Tab</a
    >
    and refresh this page to see the CPU profile.</strong
  >
</p>` + res
  );
}

Seperti yang Anda lihat, kita perlu meminimalkan cakupan kode yang dieksekusi selama aktivasi profiler. Jadi dalam lingkup kami, kami hanya menelepon cmarkWASM() fungsi.

Di sisi lain, kami memilih versi 0.31.2 dari Spesifikasi CommonMark (in spec.md) adalah dokumen masukan untuk mode analisis kinerja. Alasan utama kami memilih dokumen ini adalah karena dokumen ini menggunakan banyak fitur Markdown dan cukup panjang sehingga menimbulkan masalah bagi banyak parser Markdown:

> wc -l spec.md  # 行数
    9756 spec.md
> wc -w spec.md  # 词数
   25412 spec.md

Kami mengonfigurasi ulang aplikasi rumah sehingga mengeklik tautan “Profil” di bilah navigasi akan memicunya profileView() fungsinya, menghasilkan hasil sebagai berikut:

Jika Anda pernah mempelajari pengoptimalan kinerja secara mendalam, Anda pasti sudah familiar dengan diagram api ini…

dll.wasm-function[679]、wasm-function[367] Apa nama ini? Bagaimana Anda tahu fungsi mana yang sesuai dengan bilangan yang mana?

Ternyata kita perlu menyimpan beberapa informasi debug saat membuat file Wasm. Bagaimanapun, kami telah membangun proyek MoonBit menggunakan:

> moon -C cmarkwrap build --release --target=wasm-gc

…dan menghapus informasi debug yaitu moon Perilaku default saat membuat versi rilis.

Untungnya, kita bisa menggunakan flag tambahan --no-strip untuk menyimpan informasi simbol tanpa harus bergantung pada build debug yang lambat. Mari kita membangun kembali proyek dengan tanda ini:

> moon -C cmarkwrap build --release --no-strip --target=wasm-gc

Berita

Juga, jika kita ingin menggunakan file Wasm yang dihasilkan wasm-optdapat digunakan wasm-opt dari --debuginfo(atau -g) tandai untuk mempertahankan nama fungsi dalam keluaran yang dioptimalkan.

Dengan menyimpan nama fungsi, kita akhirnya dapat melihat apa yang terjadi di tab Performance!

Grafik api seperti yang ditunjukkan di atas memberikan gambaran yang baik tentang pemanggilan fungsi dan waktu eksekusi. Jika Anda belum tahu, ide utama dari diagram api adalah:

• sumbu Y Mewakili tumpukan panggilan, dengan fungsi teratas dipanggil terlebih dahulu;
• sumbu X Mewakili waktu eksekusi, lebar setiap node persegi panjang sesuai dengan total waktu yang dihabiskan untuk panggilan ke fungsi dan subfungsi.

Karena kita mempelajari kinerja perpustakaan Cmark, kita perlu melacak dan memberikan perhatian khusus @rami3l/cmark/cmark_html.render() simpul. Misalnya pada node ini kita bisa melihat dengan jelas render() Eksekusinya dibagi menjadi dua bagian utama, yang diwakili oleh dua sub-node dalam diagram:

• @rami3l/cmark/cmark.Doc::from_string()menunjukkan konversi dokumen input Markdown menjadi pohon sintaksis;
• @rami3l/cmark/cmark_html.from_doc()menunjukkan rendering pohon sintaksis ke dalam dokumen HTML akhir.

Untuk melihat performa yang lebih baik, kita dapat mengklik grafik nyala render() simpul. Ini akan menyebabkan Chrome memperbarui tampilan “bottom-up” dan hanya menampilkan itu render() Suatu fungsi disebut rekursif. Dengan cara ini kita akan mendapatkan hasil sebagai berikut:

Dengan mengurutkan entri dalam tampilan “bottom-up” menurut waktunya (yaitu, total waktu tidak termasuk waktu yang dihabiskan dalam sub-fungsi), kita dapat dengan mudah mengidentifikasi fungsi-fungsi yang paling banyak menghabiskan waktunya, dan kemudian melakukan pemeriksaan mendetail terhadap implementasi fungsi-fungsi tersebut. Pada saat yang sama, kita juga harus mencoba menghilangkan tumpukan panggilan yang dalam, yang dapat ditemukan dengan mencari batang vertikal yang lebih panjang pada diagram nyala.

Selama pengembangan, Cmark telah diprofilkan beberapa kali menggunakan metode pembuatan profil yang ditunjukkan di atas untuk mencapai kinerja yang memuaskan. Jadi bagaimana cara membandingkannya dengan pustaka Markdown JavaScript yang populer?

Untuk pengujian ini, kami memilih Micromark dan Remark—dua pustaka Markdown yang banyak digunakan di ekosistem JavaScript—sebagai referensi kami. Kami menggunakan Chrome 133 versi terbaru sebagai runtime JS dan Wasm dalam pengujian ini, dan menggunakan Tinybench untuk mengukur throughput rata-rata setiap perpustakaan.

Berikut throughput rata-rata perpustakaan untuk mengonversi CommonMark Specs ke HTML di MacBook M1 Pro:

Hasilnya jelas: berkat proses pembuatan profil dan pengoptimalan yang berkelanjutan, Cmark kini sekitar 12 kali lebih cepat dibandingkan perpustakaan berbasis JavaScript dan 13 kali lebih cepat dibandingkan Micromark. Dan,wasm-opt Langkah pengoptimalan tambahan dapat menghasilkan kinerja tambahan untuk Cmark, meningkatkan faktor ini menjadi sekitar 13x dan 14x.

Singkatnya, kinerja Cmark menunjukkan kemampuan MoonBit yang kuat untuk memberikan peningkatan efisiensi yang nyata dalam skenario pengembangan front-end.

Jika Anda tertarik dengan detail demo ini, Anda dapat melihat kode terakhir di GitHub. Kode yang digunakan untuk benchmarking juga tersedia di sini.

Baru mengenal MoonBit?