WebAssembly untuk Pembangun Web: Dari Kosong ke Pengeluaran

WebAssembly (WASM) bermula sebagai cara untuk menjalankan C++ dalam pelayar. Pada 2026, ia berjalan di mana-mana - pelayar, pelayan, rangkaian edge, peranti terbenam - dan menggerakkan beberapa aplikasi paling mencabar di web. Enjin rendering Figma, Adobe Photoshop di web, pemprosesan video Google Meet, dan platform edge compute Cloudflare semuanya berjalan pada WebAssembly.

Chrome Platform Status meletakkan WASM pada kira-kira 5.5% daripada semua pemuatan halaman Chrome pada awal 2026, meningkat daripada 4.5% tahun sebelumnya. Dengan WASM 3.0 menjadi standard W3C dan WASI matang menuju 1.0, ekosistem telah mencapai titik perubahan.

Panduan ini merangkumi segala yang anda perlu tahu untuk mula membina dengan WebAssembly.

Apa itu WebAssembly?

WebAssembly ialah format arahan binari yang direka sebagai sasaran kompilasi. Anda menulis kod dalam bahasa peringkat tinggi (Rust, C, C++, Go, Kotlin), mengompilkannya ke .wasm, dan menjalankannya dalam sebarang persekitaran yang mempunyai WASM runtime - pelayar, Node.js, Cloudflare Workers, Wasmtime, atau Wasmer.

Cara Ia Berfungsi

WASM ialah mesin maya berasaskan stack. Fungsi menolak dan memuncakkan nilai pada operand stack. Host runtime (V8 dalam Chrome, SpiderMonkey dalam Firefox) mengkompil-JIT bytecode WASM ke kod mesin asli, itulah sebabnya prestasi hampir setara dengan native.

Ciri-ciri utama:

• Pelaksanaan sandboxed: Modul WASM hanya boleh mengakses sumber yang diberikan secara eksplisit oleh host. Tiada filesystem, tiada rangkaian, tiada akses OS melainkan dibenarkan. Ini berbeza secara asas daripada kod native.
• Memori linear: satu ArrayBuffer bersambung yang dikongsi antara WASM dan host. Data kompleks (string, struct) dipindahkan dengan menulis ke memori dan berkongsi pointer.
• Terhad jenis: WASM menyokong secara native hanya empat jenis: i32, i64, f32, f64. Segala-galanya yang lain (string, array, objek) memerlukan pengekodan melalui memori linear atau Component Model.
• Mudah alih: binari .wasm yang sama berjalan pada mana-mana platform dengan WASM runtime, tanpa kompilasi semula.

WASM vs JavaScript

WASM tidak menggantikan JavaScript. Ia melengkapinya.

Gunakan JavaScript untuk kerja UI dan DOM. Gunakan WASM untuk pengkomputeran berat: pemprosesan imej, pengekodan video, simulasi fizik, kriptografi, parsing data.

WASM 3.0: Apa yang Baru

WebAssembly 3.0 menjadi standard W3C pada September 2025, menstandardkan sembilan ciri yang telah dalam pembangunan selama bertahun-tahun.

Yang paling berkesan ialah WasmGC. Sebelum ia, mengompil Java atau Kotlin ke WASM bermakna menghantar keseluruhan garbage collector sebagai sebahagian daripada binari, membengkakkan saiz fail. Kini GC pelayar sendiri mengendalikan pengurusan memori untuk modul WASM, sama seperti yang dilakukannya untuk JavaScript.

WASI: WebAssembly Melangkaui Pelayar

WASM dalam pelayar adalah berkuasa, tetapi WASI (WebAssembly System Interface) adalah yang menjadikan WASM sebagai runtime universal. WASI menyediakan antara muka standard untuk sumber sistem - fail, rangkaian, jam, nombor rawak - membenarkan modul WASM berjalan di luar pelayar.

WASI Preview 2 (keluaran stabil semasa) mentakrifkan antara muka berikut:

• wasi:filesystem - operasi fail melalui capability handles (bukan file descriptor tradisional)
• wasi:sockets - rangkaian TCP/UDP
• wasi:http - pengendalian request/response HTTP
• wasi:clocks - wall clock, monotonic clock
• wasi:random - kerawakan kriptografi
• wasi:cli - argumen baris arahan, pembolehubah persekitaran, stdio

Prinsip utama ialah keselamatan berasaskan kapabiliti: modul WASM tidak boleh mengakses filesystem melainkan host secara eksplisit memberikan handle ke direktori tertentu. Ini menjadikan WASI secara asas lebih selamat daripada menjalankan executable native.

Laluan ke WASI 1.0

WASI 0.3.0 (menambah primitif async/concurrency) dijangka pada 2026, dengan WASI 1.0 akan menyusul. Tambahan utama ialah async bersepadu bahasa dengan streaming I/O zero-copy.

Component Model

Modul WASM teras hanya boleh menukar nombor. Component Model menyelesaikan had ini dengan menambah sistem jenis yang kaya dan lapisan composability di atas WASM.

WIT (WebAssembly Interface Types)

WIT ialah Interface Definition Language yang membolehkan komponen mengisytiharkan import dan eksport mereka dengan jenis yang kaya - string, record, list, variant, enum - bukan hanya i32 dan f64.

// calculator.wit
package myorg:calculator@1.0.0;

interface operations {
    record calculation {
        expression: string,
        result: f64,
        timestamp: u64,
    }

    add: func(a: f64, b: f64) -> f64;
    multiply: func(a: f64, b: f64) -> f64;
    history: func() -> list<calculation>;
}

world calculator {
    export operations;
}

Toolchain seperti wit-bindgen menghasilkan binding khusus bahasa daripada fail WIT. Komponen Rust dan komponen Python boleh menukar string, record, dan list melalui kontrak WIT tanpa mana-mana pihak mengetahui bahasa pelaksanaan pihak lain.

Membina Modul WASM Pertama Anda dengan Rust

Rust mempunyai tooling WASM paling matang. Mari kita bina contoh praktikal: modul pemprosesan imej yang berjalan dalam pelayar.

Persediaan

# Install the WASM target for Rust
rustup target add wasm32-unknown-unknown

# Install wasm-pack (builds Rust to WASM + generates JS bindings)
cargo install wasm-pack

# Create a new library project
cargo new --lib image-processor
cd image-processor

Konfigurasikan Cargo.toml

[package]
name = "image-processor"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

Tulis Kod Rust

// src/lib.rs
use wasm_bindgen::prelude::*;

/// Convert an image buffer to grayscale.
/// Input: RGBA pixel data as a flat u8 array (4 bytes per pixel).
/// Output: Modified in place for zero-copy performance.
#[wasm_bindgen]
pub fn grayscale(pixels: &mut [u8]) {
    for chunk in pixels.chunks_exact_mut(4) {
        let r = chunk[0] as f32;
        let g = chunk[1] as f32;
        let b = chunk[2] as f32;
        // ITU-R BT.709 luminance coefficients
        let gray = (0.2126 * r + 0.7152 * g + 0.0722 * b) as u8;
        chunk[0] = gray;
        chunk[1] = gray;
        chunk[2] = gray;
        // chunk[3] is alpha, leave unchanged
    }
}

/// Adjust brightness of an image.
/// factor > 1.0 brightens, < 1.0 darkens.
#[wasm_bindgen]
pub fn adjust_brightness(pixels: &mut [u8], factor: f32) {
    for chunk in pixels.chunks_exact_mut(4) {
        chunk[0] = ((chunk[0] as f32 * factor).min(255.0)) as u8;
        chunk[1] = ((chunk[1] as f32 * factor).min(255.0)) as u8;
        chunk[2] = ((chunk[2] as f32 * factor).min(255.0)) as u8;
    }
}

/// Invert all colors in the image.
#[wasm_bindgen]
pub fn invert(pixels: &mut [u8]) {
    for chunk in pixels.chunks_exact_mut(4) {
        chunk[0] = 255 - chunk[0];
        chunk[1] = 255 - chunk[1];
        chunk[2] = 255 - chunk[2];
    }
}

/// Calculate the average brightness of an image (0-255).
#[wasm_bindgen]
pub fn average_brightness(pixels: &[u8]) -> f32 {
    let mut total: f64 = 0.0;
    let pixel_count = pixels.len() / 4;
    for chunk in pixels.chunks_exact(4) {
        let luminance = 0.2126 * chunk[0] as f64
            + 0.7152 * chunk[1] as f64
            + 0.0722 * chunk[2] as f64;
        total += luminance;
    }
    (total / pixel_count as f64) as f32
}

Bina

wasm-pack build --target web

Ini menghasilkan direktori pkg/ dengan:

• image_processor_bg.wasm - binari WASM yang telah dikompil
• image_processor.js - kod glue JavaScript dengan definisi TypeScript
• package.json - sedia untuk diterbitkan ke npm

Gunakan dalam JavaScript

<!DOCTYPE html>
<html>
<head><title>WASM Image Processor</title></head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>
  <button onclick="applyGrayscale()">Grayscale</button>
  <button onclick="applyBrightness()">Brighten</button>
  <button onclick="applyInvert()">Invert</button>

  <script type="module">
    import init, { grayscale, adjust_brightness, invert } from "./pkg/image_processor.js";

    let ctx;
    let imageData;

    async function setup() {
      await init();
      const canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");

      // Load an image onto the canvas
      const img = new Image();
      img.onload = () => {
        ctx.drawImage(img, 0, 0);
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      };
      img.src = "photo.jpg";
    }

    window.applyGrayscale = () => {
      grayscale(imageData.data);
      ctx.putImageData(imageData, 0, 0);
    };

    window.applyBrightness = () => {
      adjust_brightness(imageData.data, 1.3);
      ctx.putImageData(imageData, 0, 0);
    };

    window.applyInvert = () => {
      invert(imageData.data);
      ctx.putImageData(imageData, 0, 0);
    };

    setup();
  </script>
</body>
</html>

Pandangan utama: imageData.data ialah Uint8ClampedArray yang disokong oleh ArrayBuffer. Apabila dihantar ke WASM, ia berkongsi memori yang sama - tiada penyalinan. Fungsi Rust mengubah suai piksel di tempat, dan pihak JavaScript melihat perubahan serta-merta.

Tahap Lebih Rendah: Instansiasi WASM Manual

Jika anda tidak mahu menggunakan wasm-bindgen, anda boleh meng-instansiasikan modul WASM secara langsung:

const response = await fetch("calculator.wasm");
const { instance } = await WebAssembly.instantiateStreaming(response, {
  env: {
    // Functions the WASM module can call
    log_result: (value) => console.log("Result:", value),
  },
});

// Call exported functions
const { add, multiply } = instance.exports;
console.log(add(5, 3));       // 8
console.log(multiply(4, 7));  // 28

Ini berguna apabila anda mahukan overhead minimum dan tidak memerlukan interop jenis yang kaya.

Prestasi: WASM vs JavaScript

Benchmark dunia nyata menunjukkan peningkatan kelajuan yang ketara untuk tugas intensif CPU:

WASM berjalan pada kira-kira 95% kelajuan kod native. Keuntungan terbesar datang daripada:

• Prestasi yang boleh diramal (tiada pemanasan JIT, tiada jeda GC)
• Arahan SIMD untuk pemprosesan data selari
• Akses memori langsung tanpa gangguan garbage collector

Di mana WASM TIDAK lebih pantas: manipulasi DOM, pengiraan kecil, tugas terikat I/O. JavaScript sudah dioptimumkan untuk ini.

Kes Penggunaan Pengeluaran

Figma: Rendering Vektor Masa Nyata

Enjin rendering teras Figma ialah C++ yang dikompil ke WASM. Setiap bentuk, gradien, dan kesan dikira dalam WASM dan dilukis pada elemen Canvas. Ini membolehkan Figma mengendalikan reka bentuk kompleks dengan ribuan lapisan pada 60fps dalam pelayar - prestasi yang mustahil dalam JavaScript tulen.

Adobe Photoshop di Web

Adobe memindahkan penapis dan alat Photoshop utama ke WASM menggunakan Rust. Benchmark mereka menunjukkan pemprosesan imej 4K dalam 22ms dengan WASM SIMD vs 180ms dalam JavaScript - peningkatan 8x yang membolehkan pratonton penapis masa nyata.

Cloudflare Workers

Cloudflare menjalankan modul WASM dalam V8 isolates merentasi 330+ lokasi edge. Cold start ialah 1-5ms (berbanding 100-500ms untuk serverless berasaskan kontena). Pada Februari 2026, mereka menggunakan inferens Llama-3-8b merentasi rangkaian edge mereka menggunakan WASM.

Google Meet

Kabur latar belakang dan latar belakang maya dalam Google Meet menggunakan WASM dengan SIMD untuk pemprosesan video masa nyata. Modul WASM memproses setiap frame video cukup pantas untuk mengekalkan video lancar pada 30fps.

Sokongan Pelayar (2026)

Semua pelayar utama menyokong WASM sepenuhnya. Ciri-ciri yang lebih baru (WasmGC, Exception Handling) telah mencapai ketersediaan yang luas.

Rujukan Tooling

Mengoptimumkan Saiz Binari

Binari WASM boleh menjadi besar. Berikut cara mengecilkannya:

# Cargo.toml
[profile.release]
opt-level = "z"     # Optimize for size
lto = true          # Link-time optimization
codegen-units = 1   # Better optimization, slower compile
strip = true        # Strip debug symbols

# Build in release mode
wasm-pack build --release --target web

# Further optimize with wasm-opt
wasm-opt -Oz pkg/image_processor_bg.wasm -o pkg/image_processor_bg.wasm

Modul WASM Rust tipikal turun daripada 500KB kepada di bawah 50KB dengan pengoptimuman ini.

Peta Jalan Bermula

Kesimpulan

WebAssembly tidak lagi eksperimental. Ia adalah teknologi pengeluaran yang digunakan oleh beberapa aplikasi paling mencabar di web. Prestasi hampir native, keselamatan sandboxed, dan kemudahalihan universal - tiada sasaran kompilasi lain memberi anda ketiga-tiganya.

Anda tidak perlu menulis semula seluruh aplikasi anda dalam WASM. Mulakan dengan satu fungsi intensif CPU - penapis imej, parser data, pengiraan fizik - kompilkannya ke WASM, dan panggilnya daripada JavaScript. Ukur perbezaannya. Kemudian tentukan di mana lagi WASM boleh membantu.

Tooling sudah matang, sokongan pelayar universal, dan ekosistem berkembang. Jika anda menulis Rust, anda sudah satu arahan daripada pelayar.

Senarai Semak Bermula:

• Rust dan wasm-pack dipasang
• Modul WASM pertama dibina dan berjalan dalam pelayar
• Interop JavaScript berfungsi (memanggil WASM daripada JS)
• Release build dengan pengoptimuman saiz digunakan
• Prestasi dibandingkan dengan kesetaraan JavaScript tulen
• WASI diterokai dengan Wasmtime untuk kes penggunaan sisi pelayan