Kasus Penggunaan WASM: Pemrosesan Gambar dan Komputasi

Alur pemrosesan gambar standar dengan WASM: dapatkan objek ImageData dari kanvas, ubah data pikselnya menjadi larik bertipe (Uint8Array), salin ke memori linear WASM, panggil fungsi WASM untuk menerapkan filter, salin hasilnya kembali, lalu gunakan putImageData() untuk merender gambar yang telah diproses pada kanvas.

Perbandingan tolok ukur secara konsisten menunjukkan bahwa implementasi filter skala abu-abu dan buram WASM mengungguli JavaScript yang setara sebesar 5–10 kali pada gambar besar. Untuk gambar berukuran 4000x3000 piksel, filter skala abu-abu JavaScript mungkin memerlukan 80 milidetik, sedangkan versi Rust WASM selesai dalam waktu kurang dari 10 milidetik. Perbedaan ini dapat dirasakan pengguna dalam skenario penyuntingan waktu nyata.

Pemrosesan audio waktu nyata menggunakan AudioWorklet dari Web Audio API, yang berjalan di thread audio khusus dan terpisah dari thread utama. WASM dapat berjalan di dalam AudioWorklet untuk menghasilkan efek audio dengan kinerja mendekati asli (gema, kompresi, ekualisasi). Pola ini sepenuhnya melewati React untuk jalur audio—React hanya menangani kontrol UI yang mengonfigurasi parameter audio.

Papa Parse menangani penguraian CSV dalam JavaScript dengan baik untuk berkas kecil hingga menengah, tetapi untuk berkas dengan jutaan baris, pengurai CSV Rust yang dikompilasi ke WASM jauh lebih cepat. Pengurai WASM memproses larik byte mentah, menerapkan penyaringan dan transformasi dalam Rust, lalu hanya mengembalikan hasil yang telah diproses ke JavaScript—sehingga menghindari pembuatan jutaan objek JavaScript perantara.

Untuk pencarian teks penuh yang cepat dalam dokumen besar (berkas log, basis kode, kumpulan data besar), mesin ekspresi reguler Rust yang dikompilasi ke WASM memberikan performa pencarian yang mendekati asli. Pustaka seperti crate Rust regex yang dikompilasi ke WASM dapat mencari jutaan baris dalam hitungan milidetik. React merender hasil pencarian; WASM melakukan pencariannya.

Fungsi hash kriptografi (SHA-256, SHA-512) dan enkripsi simetris (AES) yang diimplementasikan dalam Rust WASM memberikan performa yang cepat dan deterministik, terlepas dari optimisasi mesin JavaScript. Untuk aplikasi yang melakukan enkripsi sisi klien (perpesanan terenkripsi ujung ke ujung, derivasi kata sandi dengan Argon2), pustaka kriptografi berbasis WASM secara signifikan mengungguli implementasi JavaScript murni.

Mesin fisika Rapier (rapier.rs) ditulis dalam Rust dan dikompilasi ke WASM, sehingga tersedia untuk permainan peramban dan simulasi interaktif. React merender UI permainan dan panel status; modul WASM Rapier menjalankan simulasi fisika pada setiap bingkai. Pola ini memisahkan tanggung jawab UI dari tanggung jawab mesin permainan dengan jelas.

Dari sudut pandang React, fungsi WASM adalah fungsi komputasi murni: fungsi tersebut menerima data masukan dan mengembalikan hasil. React memanggilnya, menerima hasil, lalu memperbarui status: const result = await runWasm(inputData); setState(result). React merender ulang tampilan untuk menampilkan hasil. Pemisahan yang jelas ini membuat kode komponen tetap sederhana, terlepas dari kompleksitas komputasinya.

Menjalankan komputasi WASM sinkron pada thread utama React akan memblokir peramban: tidak ada pembaruan UI, penanganan peristiwa, atau animasi hingga komputasi selesai. Untuk operasi WASM apa pun yang memerlukan lebih dari 16 milidetik (satu bingkai pada 60 fps), pindahkan komputasi ke Web Worker. React berkomunikasi dengan Worker melalui pesan dan memperbarui status saat hasil tiba.

Saat meneruskan larik besar antara JavaScript dan WASM, hindari penyalinan jika memungkinkan. Akses memori linear WASM secara langsung melalui memory.buffer ArrayBuffer, tulis data masukan menggunakan tampilan larik bertipe (new Uint8Array(wasmMemory.buffer, offset, length)), panggil fungsi WASM, lalu baca hasil dari buffer yang sama. Pola tanpa penyalinan ini sangat penting untuk buffer gambar dan audio yang besar.

Algoritma kompresi Brotli dan Zstd yang dikompilasi ke WASM menyediakan kompresi sisi klien yang cepat. Contoh penggunaannya dalam aplikasi React: mengompresi muatan JSON berukuran besar sebelum mengunggahnya untuk menghemat bandwidth, mendekompresi format data biner dari server untuk ditampilkan, serta memungkinkan aplikasi kaya fitur yang dapat digunakan secara luring dengan menyimpan data terkompresi di IndexedDB.

Mengapa komputasi WASM yang berjalan lama sebaiknya dipindahkan ke pekerja web?

WASM sangat unggul dalam manipulasi piksel (5–10 kali lebih cepat daripada JS untuk filter gambar), audio waktu nyata di AudioWorklets, penguraian CSV/teks berukuran besar, operasi kriptografi, dan simulasi fisika. Pola React-nya sederhana: React memanggil WASM sebagai fungsi komputasi murni, lalu menampilkan hasilnya. Selalu jalankan komputasi yang berlangsung lebih dari 16 md di pekerja web agar utas utama tetap bebas. Gunakan teknik tanpa penyalinan (ArrayBuffer bersama) untuk transfer data berukuran besar guna meminimalkan beban tambahan.