Bagaimana kami menggunakan WebAssembly untuk mempercepat aplikasi web sebanyak 20 kali lipat

Artikel ini membahas kasus untuk mempercepat aplikasi browser dengan mengganti perhitungan JavaScript dengan WebAssembly.

WebAssembly - apa itu?

Singkatnya, ini adalah format instruksi biner untuk mesin virtual berbasis tumpukan. Wasm (nama pendek) sering disebut sebagai bahasa pemrograman, padahal sebenarnya tidak. Format instruksi dijalankan di browser bersama dengan JavaScript.

Penting agar WebAssembly dapat diperoleh dengan mengkompilasi sumber dalam bahasa seperti C/C++, Rust, Go. Di sini pengetikan statistik dan apa yang disebut model memori datar digunakan. Kode, seperti disebutkan di atas, disimpan dalam format biner kompak, sehingga hampir secepat menjalankan aplikasi menggunakan baris perintah. Kemampuan ini telah menyebabkan pertumbuhan popularitas WebAssembly.

Kami mengingatkan: untuk semua pembaca "Habr" - diskon 10 rubel saat mendaftar di kursus Skillbox apa pun menggunakan kode promosi "Habr".

Skillbox merekomendasikan: Tentu saja praktis "Pengembang Seluler PRO".

Saat ini Wasm digunakan di banyak aplikasi, mulai dari game seperti Doom 3 hingga aplikasi porting web seperti Autocad dan Figma. Wasm juga digunakan di berbagai bidang seperti komputasi tanpa server.

Artikel ini memberikan contoh penggunaan Wasm untuk mempercepat layanan web analitik. Untuk kejelasan, kami mengambil aplikasi kerja yang ditulis dalam C, yang dikompilasi ke dalam WebAssembly. Hasilnya akan digunakan untuk menggantikan bagian JS yang berkinerja buruk.

Transformasi Aplikasi

Contohnya akan menggunakan layanan browser fastq.bio yang ditujukan untuk para ahli genetika. Alat ini memungkinkan Anda mengevaluasi kualitas pengurutan DNA (decoding).

Berikut ini contoh penerapannya:

Detail prosesnya tidak perlu dibahas karena cukup rumit bagi non-spesialis, namun singkatnya, para ilmuwan dapat menggunakan infografis di atas untuk memahami apakah proses pengurutan DNA berjalan lancar dan masalah apa yang muncul.

Layanan ini memiliki alternatif, program desktop. Namun fastq.bio memungkinkan Anda mempercepat pekerjaan Anda dengan memvisualisasikan data. Dalam sebagian besar kasus lainnya, Anda harus bisa bekerja dengan baris perintah, namun tidak semua ahli genetika memiliki pengalaman yang diperlukan.

Semuanya bekerja dengan sederhana. Inputnya adalah data yang disajikan dalam bentuk file teks. File ini dihasilkan oleh alat pengurutan khusus. File tersebut berisi daftar urutan DNA dan skor kualitas untuk setiap nukleotida. Format filenya adalah .fastq, itulah sebabnya layanan ini mendapatkan namanya.

Implementasi dalam JavaScript

Langkah pertama pengguna saat bekerja dengan fastq.bio adalah memilih file yang sesuai. Menggunakan objek File, aplikasi membaca sampel data acak dari file dan memproses batch tersebut. Tugas JavaScript di sini adalah melakukan operasi string sederhana dan menghitung metrik. Salah satunya adalah jumlah nukleotida A, C, G dan T pada fragmen DNA yang berbeda.

Setelah menghitung indikator yang diperlukan, indikator tersebut divisualisasikan menggunakan Plotly.js, dan layanan mulai bekerja dengan sampel data baru. Chunking dilakukan untuk meningkatkan kualitas UX. Jika Anda mengerjakan semua data sekaligus, prosesnya akan terhenti selama beberapa waktu, karena file dengan hasil pengurutan memakan ruang file ratusan gigabyte. Layanan ini mengambil potongan data dengan ukuran mulai dari 0,5 hingga 1 MB dan mengerjakannya langkah demi langkah, membuat data grafis.

Begini Cara kerjanya:

Persegi panjang merah berisi algoritma transformasi string untuk mendapatkan visualisasi. Ini adalah bagian layanan yang paling intensif secara komputasi. Ada baiknya mencoba menggantinya dengan Wasm.

Menguji WebAssembly

Untuk menilai kemungkinan penggunaan Wasm, tim proyek mulai mencari solusi siap pakai untuk membuat metrik QC (QC - kontrol kualitas) berdasarkan file fastq. Pencarian dilakukan di antara alat-alat yang ditulis dalam C, C++ atau Rust, sehingga memungkinkan untuk mem-porting kode ke WebAssembly. Selain itu, alat tersebut tidak boleh “mentah”; diperlukan layanan yang telah diuji oleh para ilmuwan.

Akibatnya, pilihan dibuat mendukung urutan. Aplikasi ini cukup populer, open source, bahasa sumbernya C.

Sebelum mengonversi ke Wasm, ada baiknya melihat prinsip kompilasi seqtk untuk desktop. Menurut Makefile, inilah yang Anda butuhkan:

# Compile to binary
$ gcc seqtk.c 
   -o seqtk 
   -O2 
   -lm 
   -lz

Pada prinsipnya, Anda dapat mengkompilasi seqtk menggunakan Emscripten. Jika tidak ada, kami lakukan. gambar buruh pelabuhan.

$ docker pull robertaboukhalil/emsdk:1.38.26
$ docker run -dt --name wasm-seqtk robertaboukhalil/emsdk:1.38.26

Jika diinginkan Anda bisa merakitnya sendiri, tapi itu butuh waktu.

Di dalam container, Anda dapat dengan mudah menggunakan emcc sebagai alternatif gcc:

# Compile to WebAssembly
$ emcc seqtk.c 
    -o seqtk.js 
    -O2 
    -lm 
    -s USE_ZLIB=1 
    -s FORCE_FILESYSTEM=1

Perubahan minimal:

Alih-alih menghasilkan file biner, Emscripten menggunakan .wasm dan .js untuk menghasilkan file, yang digunakan untuk menjalankan modul WebAssemby.

Bendera USE_ZLIB digunakan untuk mendukung perpustakaan zlib. Perpustakaan telah didistribusikan dan porting ke WebAssembly, dan Emscripten memasukkannya ke dalam proyek.

Sistem file virtual Emscrippten diaktifkan. Ini FS seperti POSIX, berjalan di RAM di dalam browser. Saat halaman di-refresh, memori akan dihapus.

Untuk memahami mengapa sistem file virtual diperlukan, ada baiknya membandingkan cara Anda menjalankan seqtk dari baris perintah dengan cara Anda menjalankan modul WebAssembly yang dikompilasi.

# On the command line
$ ./seqtk fqchk data.fastq
 
# In the browser console
> Module.callMain(["fqchk", "data.fastq"])

Mendapatkan akses ke sistem file virtual diperlukan agar tidak menulis ulang seqtk untuk string daripada input file. Dalam hal ini, fragmen data ditampilkan sebagai file data.fastq di FS virtual dengan panggilan ke main() seqtk di atasnya.

Inilah arsitektur barunya:

Gambar tersebut menunjukkan bahwa alih-alih melakukan penghitungan di thread browser utama, Pekerja Web. Metode ini memungkinkan Anda melakukan penghitungan di thread latar belakang tanpa memengaruhi respons browser. Nah, pengontrol WebWorker memulai Pekerja, mengelola interaksinya dengan thread utama.

Perintah seqtk dijalankan menggunakan Worker pada file yang di-mount. Setelah selesai pelaksanaannya, Pekerja menghasilkan suatu hasil berupa Janji. Ketika pesan diterima oleh thread utama, hasilnya digunakan untuk memperbarui grafik. Begitu seterusnya dalam beberapa iterasi.

Bagaimana dengan kinerja WebAssembly?

Untuk mengevaluasi perubahan kinerja, tim proyek menggunakan parameter operasi baca per detik. Waktu yang diperlukan untuk membuat grafik interaktif tidak diperhitungkan karena kedua implementasi menggunakan JavaScript.

Saat menggunakan solusi out-of-the-box, peningkatan kinerja mencapai sembilan kali lipat.

Ini adalah hasil yang luar biasa, namun ternyata ada peluang untuk mengoptimalkannya juga. Faktanya banyak hasil analisis QC yang tidak digunakan oleh seqtk, sehingga dapat dihapus. Jika Anda melakukan ini, hasilnya meningkat 13 kali lipat dibandingkan JS.

Itu dicapai hanya dengan mengomentari perintah printf().

Tapi bukan itu saja. Faktanya adalah bahwa pada tahap ini, fastq.bio menerima hasil analisis dengan memanggil fungsi C. Masing-masing fungsi menghitung kumpulan karakteristiknya sendiri, sehingga setiap fragmen file dibaca dua kali.

Untuk mengatasi masalah ini, diputuskan untuk menggabungkan dua fungsi menjadi satu. Hasilnya, produktivitas meningkat 20 kali lipat.

Perlu dicatat bahwa hasil yang luar biasa seperti itu tidak selalu dapat dicapai. Dalam beberapa kasus, kinerja akan menurun, jadi ada baiknya mengevaluasi setiap kasus.

Kesimpulannya, Wasm dapat kami katakan bahwa Wasm memang memberikan peluang untuk meningkatkan kinerja aplikasi, namun Anda perlu menggunakannya dengan bijak.

Skillbox merekomendasikan:

• Kursus praktik dua tahun "Saya seorang pengembang web PRO".
• Kursus online "Pengembang C# dari 0".
• Kursus tahun praktis "Pengembang PHP dari 0 hingga PRO".

Sumber: www.habr.com