WebAssembly (Wasm) trong trình duyệt: Ứng dụng xử lý ảnh và parse CSV nặng phía client

Vượt qua giới hạn hiệu năng của JavaScript#

Mặc dù các động cơ JavaScript hiện đại (như Google V8) đã được tối ưu hóa cực kỳ thông minh qua JIT Compiler, JS vẫn là ngôn ngữ định kiểu động (dynamically typed) và có chi phí Garbage Collection ngầm.

Khi bạn cần thực hiện các tác vụ tính toán toán học nặng nề ngay trên trình duyệt (như nén/resize ảnh hàng loạt, mã hóa video, hoặc phân tích file CSV 500MB), JavaScript sẽ khiến giao diện bị đơ cứng.

WebAssembly (Wasm) mang lại sức mạnh của C++, Rust, hoặc Go chạy với tốc độ gần như nguyên bản (Near-native speed) ngay trong sandbox trình duyệt.

Case study: Nén và Resize ảnh bằng thư viện Rust qua Wasm#

Viết hàm resize ảnh bằng Rust sử dụng crate image:

use wasm_bindgen::prelude::*;
use image::imageops::FilterType;

#[wasm_bindgen]
pub fn resize_image_wasm(image_data: &[u8], width: u32, height: u32) -> Vec<u8> {
    let img = image::load_from_memory(image_data).unwrap();
    let resized = img.resize(width, height, FilterType::Lanczos3);
    
    let mut buffer = Vec::new();
    resized.write_to(&mut buffer, image::ImageOutputFormat::Jpeg(85)).unwrap();
    buffer
}

Gọi trực tiếp trong code TypeScript ở trình duyệt:

import init, { resize_image_wasm } from './pkg/image_processor.js';

await init(); // Khởi tạo module Wasm

const fileBuffer = await file.arrayBuffer();
const compressedBytes = resize_image_wasm(new Uint8Array(fileBuffer), 800, 600);
const blob = new Blob([compressedBytes], { type: 'image/jpeg' });

Kết quả so sánh hiệu năng#

• Resize 100 bức ảnh độ phân giải 4K:
  • Canvas JavaScript thuần: Mất 42 giây, tab trình duyệt đôi lúc hiện popup "Page Unresponsive".
  • WebAssembly (Rust compiled): Hoàn thành chỉ trong 5.8 giây (Nhanh hơn 7.2 lần), CPU chạy mượt mà!

Góc thảo luận#

Anh em đã từng tích hợp module WebAssembly nào vào ứng dụng web của mình chưa? Anh em thích viết Wasm bằng Rust, C++ hay Go?

Xem thêm nội dung liên quan:

• Lộ trình WebAssembly & High Performance Web
• Review công cụ lập trình web