WebAssembly là gì và ứng dụng thực tế — Demo xử lý ảnh so sánh JS vs Wasm

WebAssembly là gì và tại sao nhanh hơn JavaScript?

WebAssembly là định dạng binary instruction chạy trong browser ở tốc độ gần native. Khác với JavaScript (interpreted + JIT-compiled), Wasm được pre-compile thành binary format nhỏ gọn, browser execute gần như machine code native. Điều này làm Wasm lý tưởng cho các tác vụ CPU-intensive như xử lý ảnh, video, mã hóa, game physics.

So sánh thực tế: xử lý ảnh 4K trong JavaScript mất ~250ms, trong WebAssembly chỉ ~45ms — nhanh hơn 5 lần. Với SIMD instructions, khoảng cách còn lớn hơn nữa. Wasm không thay thế JavaScript mà bổ sung: JS quản lý UI và I/O, Wasm xử lý computation nặng.

Demo: Xử lý ảnh với WebAssembly — so sánh tốc độ JS vs Wasm

Demo này cho phép bạn upload ảnh, áp dụng filter (grayscale, blur, invert, sepia) bằng cả JavaScript thuần và WebAssembly (mô phỏng), sau đó so sánh thời gian thực thi. WebAssembly trong demo được mô phỏng bằng cách chạy pixel manipulation trong Web Worker — tương tự cách thực tế Wasm chạy trên thread riêng để không block main thread.

Ưu điểm của WebAssembly

• Tốc độ gần native — 80-95% tốc độ native C++ cho hầu hết workload. Với SIMD, có thể đạt 100%.
• Không garbage collection — Linear memory model, performance predictable, không bị GC pause.
• Đa ngôn ngữ — Viết bằng Rust, C++, Go, AssemblyScript rồi compile sang Wasm.
• Security sandboxed — Code chạy trong sandbox, không truy cập OS trực tiếp.
• Portable — Cùng một binary chạy trên mọi browser, server, edge, IoT.
• Startup nhanh — Compile + instantiate trong 15-80ms, nhanh hơn download + parse JS tương đương.

Các ứng dụng thực tế của WebAssembly

WebAssembly không còn là thử nghiệm — đã được dùng trong production bởi các công ty lớn:

• Figma — Rendering engine C++ compile sang Wasm, giảm load time 3×, duy trì 60fps với file phức tạp.
• Photoshop Web — Xử lý ảnh 4K, filter, adjustment layer — tất cả trong browser.
• Google Earth — Render 3D geospatial data, 85-95% performance của desktop app.
• AutoCAD Web — Port codebase C++ 35 năm tuổi lên web qua Wasm.
• Unity & Unreal — Game engine AAA compile sang Wasm cho browser gaming.
• FFmpeg.wasm — Video transcoding, encoding hoàn toàn client-side.
• sql.js / wa-sqlite — SQLite chạy trong browser, offline-first database.
• Pyodide — Python interpreter (CPython) compile sang Wasm, chạy trong browser.

Khi nào nên dùng WebAssembly?

Wasm không thay thế JavaScript — chúng bổ sung cho nhau. Quy tắc đơn giản:

• Dùng JavaScript — DOM manipulation, API calls, form handling, business logic đơn giản, string manipulation.
• Dùng WebAssembly — Image/video processing, cryptography, game physics, scientific computing, data compression, 3D rendering, audio synthesis.

Nguyên tắc: Profile trước, chỉ chuyển sang Wasm khi bottleneck vượt quá 5ms per call. Với tác vụ dưới 2ms, overhead của Wasm (JS-Wasm boundary crossing) có thể không đáng.

Cách bắt đầu với WebAssembly

Không cần học Rust hay C++ ngay — có nhiều cách tiếp cận:

• Dùng thư viện Wasm có sẵn — ffmpeg.wasm, sql.js, Photon, pdfium — npm install là dùng được.
• Học Rust — Toolchain tốt nhất: wasm-pack + wasm-bindgen tự động JS-Rust interop.
• Học AssemblyScript — TypeScript-like syntax, dễ tiếp cận cho dev JS.
• Emscripten — Compile C/C++ sang Wasm, toolchain mà Figma, AutoCAD, Unity dùng.

Kết luận

WebAssembly đã chuyển từ “công nghệ tương lai” sang “công cụ hiện tại”. Đến 2026, Wasm được 5.5% website trên Chrome sử dụng, hầu hết top 25 ngôn ngữ lập trình đều có Wasm support. Component Model và WASI đang mở rộng Wasm ra khỏi browser — edge computing, serverless, IoT.

Demo trong bài này mô phỏng pipeline Wasm bằng Web Worker — trong thực tế, bạn sẽ compile Rust/C++ sang .wasm file, instantiate qua WebAssembly API, và truyền data qua SharedArrayBuffer hoặc postMessage. Quy trình phức tạp hơn một chút nhưng performance gain đáng giá.

Copy concept, tích hợp thư viện Wasm có sẵn vào project, hoặc bắt đầu với Rust + wasm-pack nếu muốn đi sâu.