WebAssembly cho Web Developer - Tu Zero den Production

WebAssembly (WASM) ban dau duoc tao ra de chay C++ trong trinh duyet. Vao nam 2026, no chay o moi noi - trinh duyet, may chu, mang Edge, thiet bi nhung - va cung cap suc manh cho nhung ung dung doi hoi cao nhat tren web. Engine render cua Figma, Adobe Photoshop tren web, xu ly video cua Google Meet, va nen tang Edge Compute cua Cloudflare deu chay tren WebAssembly.

Chrome Platform Status cho thay WASM chiem khoang 5.5% tong so lan tai trang tren Chrome tinh den dau nam 2026, tang tu 4.5% nam truoc. Voi WASM 3.0 tro thanh chuan W3C va WASI chin muoi huong toi phien ban 1.0, he sinh thai da dat den diem chuyen doi.

Huong dan nay bao gom moi thu ban can biet de bat dau xay dung voi WebAssembly.

WebAssembly la gi?

WebAssembly la mot dinh dang lenh nhi phan duoc thiet ke lam muc tieu bien dich. Ban viet code bang ngon ngu bac cao (Rust, C, C++, Go, Kotlin), bien dich thanh .wasm, va chay trong bat ky moi truong nao co WASM Runtime - trinh duyet, Node.js, Cloudflare Workers, Wasmtime, hoac Wasmer.

Cach thuc hoat dong

WASM la mot may ao dua tren stack. Cac ham day va lay gia tri tren stack toan hang. Host Runtime (V8 trong Chrome, SpiderMonkey trong Firefox) bien dich JIT WASM Bytecode thanh ma may goc, do la ly do hieu suat gan voi Native.

Cac dac diem chinh:

• Thuc thi trong Sandbox: Cac module WASM chi co the truy cap tai nguyen ma Host cho phep mot cach ro rang. Khong co quyen truy cap he thong file, mang, hay OS tru khi duoc cap phep. Dieu nay khac biet co ban so voi Native Code.
• Linear Memory: mot ArrayBuffer lien tuc duy nhat duoc chia se giua WASM va Host. Du lieu phuc tap (chuoi, struct) duoc truyen bang cach ghi vao bo nho va chia se Pointer.
• Han che ve kieu du lieu: WASM chi ho tro bon kieu goc: i32, i64, f32, f64. Moi thu khac (chuoi, mang, object) can ma hoa thong qua Linear Memory hoac Component Model.
• Di dong: cung mot file nhi phan .wasm chay tren bat ky nen tang nao co WASM Runtime, khong can bien dich lai.

WASM vs JavaScript

WASM khong thay the JavaScript. No bo sung cho JavaScript.

Su dung JavaScript cho UI va thao tac DOM. Su dung WASM cho tinh toan nang: xu ly anh, ma hoa video, mo phong vat ly, mat ma hoc, phan tich du lieu.

WASM 3.0: Co gi moi

WebAssembly 3.0 tro thanh chuan W3C vao thang 9 nam 2025, chuan hoa chin tinh nang da duoc phat trien trong nhieu nam.

Co tac dong lon nhat la WasmGC. Truoc do, bien dich Java hoac Kotlin sang WASM dong nghia voi viec mang theo toan bo Garbage Collector nhu mot phan cua file nhi phan, lam phong kich thuoc file. Bay gio GC cua chinh trinh duyet xu ly quan ly bo nho cho cac module WASM, giong nhu cach no xu ly cho JavaScript.

WASI: WebAssembly ngoai trinh duyet

WASM trong trinh duyet da manh me, nhung WASI (WebAssembly System Interface) la thu lam cho WASM tro thanh Runtime pho thong. WASI cung cap cac giao dien chuan hoa cho tai nguyen he thong - file, mang, dong ho, so ngau nhien - cho phep cac module WASM chay ben ngoai trinh duyet.

WASI Preview 2 (ban phat hanh on dinh hien tai) dinh nghia cac giao dien sau:

• wasi:filesystem - thao tac file thong qua Capability Handle (khong phai File Descriptor truyen thong)
• wasi:sockets - mang TCP/UDP
• wasi:http - xu ly HTTP Request/Response
• wasi:clocks - Wall Clock, Monotonic Clock
• wasi:random - so ngau nhien mat ma hoc
• wasi:cli - doi so dong lenh, bien moi truong, Standard I/O

Nguyen tac chinh la bao mat dua tren Capability: mot module WASM khong the truy cap he thong file tru khi Host cap ro rang mot Handle den mot thu muc cu the. Dieu nay lam cho WASI an toan hon co ban so voi viec chay file thuc thi goc.

Hanh trinh den WASI 1.0

WASI 0.3.0 (them Async/Concurrency Primitive) du kien trong nam 2026, voi WASI 1.0 theo sau. Bo sung chinh la Async tich hop ngon ngu voi Zero-copy Streaming I/O.

Component Model

Cac module WASM loi chi co the trao doi so. Component Model giai quyet han che nay bang cach them mot he thong kieu du lieu phong phu va lop Composability tren WASM.

WIT (WebAssembly Interface Types)

WIT la mot Ngon ngu Dinh nghia Giao dien cho phep cac Component khai bao Import va Export voi cac kieu du lieu phong phu - chuoi, Record, danh sach, Variant, Enum - khong chi i32 va 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;
}

Cac Toolchain nhu wit-bindgen tao ra Binding dac thu ngon ngu tu cac file WIT. Mot Component Rust va mot Component Python co the trao doi chuoi, Record va danh sach thong qua WIT Contract ma khong can biet ngon ngu cua phia con lai.

Xay dung module WASM dau tien voi Rust

Rust co bo cong cu WASM chin muoi nhat. Hay xay dung mot vi du thuc te: mot module xu ly anh chay trong trinh duyet.

Thiet lap

# 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

Cau hinh Cargo.toml

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

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

[dependencies]
wasm-bindgen = "0.2"

Viet code 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
}

Build

wasm-pack build --target web

Lenh nay tao ra thu muc pkg/ voi:

• image_processor_bg.wasm - file nhi phan WASM da bien dich
• image_processor.js - ma JavaScript Glue voi dinh nghia kieu TypeScript
• package.json - san sang xuat ban len npm

Su dung trong 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>

Diem mau chot: imageData.data la mot Uint8ClampedArray duoc ho tro boi ArrayBuffer. Khi truyen sang WASM, no chia se cung bo nho - khong sao chep. Ham Rust sua doi pixel tai cho, va phia JavaScript thay doi ngay lap tuc.

Cap thap: Khoi tao WASM thu cong

Neu ban khong muon su dung wasm-bindgen, ban co the khoi tao module WASM truc tiep:

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

Dieu nay huu ich khi ban muon Overhead toi thieu va khong can Rich Type Interop.

Hieu suat: WASM vs JavaScript

Benchmark thuc te cho thay tang toc dang ke cho cac tac vu su dung nhieu CPU:

WASM chay o khoang 95% toc do Native Code. Loi ich lon nhat den tu:

• Hieu suat du doan duoc (khong co JIT Warmup, khong co GC Pause)
• Lenh SIMD cho xu ly du lieu song song
• Truy cap bo nho truc tiep khong bi Garbage Collector can thiep

Noi WASM khong nhanh hon: thao tac DOM, tinh toan nho, tac vu I/O-bound. JavaScript da duoc toi uu hoa cho nhung thu nay roi.

Cac truong hop su dung trong Production

Figma: Render vector thoi gian thuc

Engine render cot loi cua Figma la C++ bien dich sang WASM. Moi hinh dang, Gradient va hieu ung deu duoc tinh toan trong WASM va ve len Canvas Element. Dieu nay cho phep Figma xu ly cac thiet ke phuc tap voi hang ngan Layer o 60fps trong trinh duyet - hieu suat khong the dat duoc voi JavaScript thuan.

Adobe Photoshop tren web

Adobe da chuyen cac bo loc va cong cu chinh cua Photoshop sang WASM bang Rust. Benchmark cua ho cho thay xu ly anh 4K trong 22ms voi WASM SIMD so voi 180ms trong JavaScript - cai thien 8 lan giup xem truoc bo loc thoi gian thuc tro nen kha thi.

Cloudflare Workers

Cloudflare chay cac module WASM trong V8 Isolate tren hon 330 dia diem Edge. Cold Start mat 1-5ms (so voi 100-500ms cho Serverless dua tren Container). Vao thang 2 nam 2026, ho da trien khai Inference cua Llama-3-8b tren toan bo mang Edge bang WASM.

Google Meet

Background Blur va Virtual Background trong Google Meet su dung WASM voi SIMD de xu ly video thoi gian thuc. Module WASM xu ly tung frame video du nhanh de duy tri video muot ma o 30fps.

Ho tro trinh duyet (2026)

Tat ca cac trinh duyet chinh deu ho tro day du WASM. Cac tinh nang moi hon (WasmGC, Exception Handling) da dat duoc su ho tro rong rai.

Tai lieu tham khao cong cu

Toi uu hoa kich thuoc nhi phan

File nhi phan WASM co the lon. Day la cach thu nho chung:

# 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

Mot module Rust WASM dien hinh giam tu 500KB xuong duoi 50KB voi nhung toi uu hoa nay.

Lo trinh bat dau

Ket luan

WebAssembly khong con la cong nghe thu nghiem. No la cong nghe Production duoc su dung boi nhung ung dung doi hoi cao nhat tren web. Hieu suat gan Native, bao mat Sandbox, va kha nang di dong pho thong - khong co Compilation Target nao khac mang lai ca ba dieu nay.

Ban khong can viet lai toan bo ung dung bang WASM. Bat dau voi mot ham su dung nhieu CPU - mot bo loc anh, mot trinh phan tich du lieu, mot phep tinh vat ly - bien dich sang WASM va goi tu JavaScript. Do su khac biet. Sau do quyet dinh WASM co the giup gi them.

Cong cu da chin muoi, ho tro trinh duyet la pho thong, va he sinh thai dang phat trien. Neu ban viet Rust, ban chi cach trinh duyet mot lenh duy nhat.

Danh sach kiem tra bat dau:

• Da cai dat Rust va wasm-pack
• Build module WASM dau tien va chay trong trinh duyet
• Tuong tac JavaScript hoat dong (goi WASM tu JS)
• Build phat hanh voi toi uu hoa kich thuoc da ap dung
• Benchmark hieu suat so voi JavaScript thuan tuong duong
• Kham pha WASI voi Wasmtime cho cac truong hop su dung phia may chu