Posted inDevelopment

Tối ưu hiệu suất Web với WebAssembly và Rust: Bài học từ 6 tháng thực chiến

Development tutorial - IT technology blog
Development tutorial - IT technology blog

Khi JavaScript chạm ngưỡng giới hạn

Sau nửa năm vận hành module xử lý ảnh và tính toán ma trận trên production bằng WebAssembly (Wasm), mình nhận ra một điều: JavaScript (JS) dù rất nhanh nhờ engine V8, nhưng nó vẫn có những giới hạn vật lý khó phá vỡ. Khi bạn cần xử lý 2 triệu dòng dữ liệu CSV hay mã hóa video ngay trên trình duyệt, JS bắt đầu đuối sức. Hiện tượng giật lag (frame drop) xảy ra liên tục do CPU quá tải và cơ chế Garbage Collection (GC) dọn dẹp bộ nhớ không đúng lúc.

Đây chính là lúc WebAssembly tỏa sáng. Thay vì chọn C++ với nỗi lo rò rỉ bộ nhớ (memory leak), mình tin dùng Rust. Sự kết hợp giữa tính an toàn của Rust và tốc độ thực thi của Wasm mang lại hiệu suất đáng kinh ngạc cho ứng dụng web.

So sánh thực tế: JS thuần, Web Workers và WebAssembly

Trước khi tối ưu, mình đã thử nghiệm ba phương án khác nhau:

  • JavaScript thuần: Viết rất nhanh nhưng lại chậm chạp khi xử lý thuật toán phức tạp.
  • Web Workers: Giải phóng Main Thread giúp UI không bị đơ. Tuy nhiên, nếu thuật toán tốn 10 giây để chạy, nó vẫn ngốn đúng 10 giây ở background.
  • WebAssembly (Rust): Tốc độ gần như tương đương phần mềm cài đặt trên máy tính (native). Trong dự án của mình, tác vụ tính toán ma trận giảm từ 1.2 giây xuống chỉ còn 0.15 giây.

Kinh nghiệm rút ra từ việc refactor 50.000 dòng code tài chính là: Đừng lạm dụng Wasm. Hãy chỉ chuyển những phần tính toán nặng (bottlenecks) sang Wasm. Những việc như điều khiển giao diện hay gọi API vẫn nên để JS đảm nhận vì tính linh hoạt cao.

Lý do Rust vượt trội hơn C++ hay Go khi viết Wasm

1. Không cần Garbage Collector (GC)

Go có thể compile sang Wasm nhưng đi kèm bộ runtime khá nặng. Ngược lại, Rust quản lý bộ nhớ qua cơ chế Ownership ngay khi biên dịch. Nhờ đó, file .wasm xuất ra cực kỳ nhỏ gọn, giúp tốc độ tải trang nhanh hơn đáng kể.

2. Công cụ hỗ trợ tận răng

Với wasm-pack, việc đóng gói code Rust thành một npm package cực kỳ nhàn. Bạn có thể import nó vào dự án React hay Vue như một thư viện JS thông thường mà không cần cấu hình compiler phức tạp.

3. Code chạy là an tâm

Làm việc với dữ liệu lớn trong C++ rất dễ gây lỗi truy cập vùng nhớ. Rust ngăn chặn điều này ngay từ bước viết code. Nếu logic không an toàn, trình biên dịch sẽ từ chối tạo file, giúp tránh được hàng tá bug trên production.

Hướng dẫn triển khai: Xây dựng module tính toán hiệu suất cao

Đầu tiên, bạn cần cài đặt môi trường Rust bằng lệnh:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Tiếp theo, cài đặt wasm-pack để hỗ trợ build Wasm:

cargo install wasm-pack

Bước 1: Khởi tạo dự án

Tạo thư mục mới và khởi tạo dự án Rust:

cargo new --lib wasm-performance-demo
cd wasm-performance-demo

Cấu hình file Cargo.toml để định nghĩa kiểu thư viện:

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

[dependencies]
wasm-bindgen = "0.2"

Bước 2: Viết logic xử lý bằng Rust

Chúng ta sẽ thử nghiệm với hàm Fibonacci – một tác vụ đệ quy ngốn rất nhiều CPU. Viết vào src/lib.rs:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

Ký hiệu #[wasm_bindgen] đóng vai trò cầu nối, giúp JavaScript có thể gọi trực tiếp hàm của Rust.

Bước 3: Biên dịch sang WebAssembly

Chạy lệnh sau để tạo ra package cho web:

wasm-pack build --target web

Sau khi hoàn tất, thư mục /pkg sẽ chứa file .wasm và các file JS bổ trợ.

Bước 4: Nhúng vào ứng dụng JavaScript

Bạn có thể sử dụng module Rust này trong file index.html như sau:

<script type="module">
    import init, { fibonacci } from './pkg/wasm_performance_demo.js';

    async function run() {
        await init();
        
        const start = performance.now();
        const result = fibonacci(40);
        const end = performance.now();

        console.log(`Kết quả: ${result}`);
        console.log(`Wasm thực thi trong: ${end - start}ms`);
    }

    run();
</script>

Những vấn đề thực tế khi triển khai Production

Wasm không phải là “viên đạn bạc”. Sau 6 tháng, mình rút ra 3 lưu ý quan trọng:

1. Chi phí truyền dữ liệu (The Bridge Overhead)

Mỗi khi gọi hàm giữa JS và Wasm, trình duyệt phải copy dữ liệu qua lại. Nếu bạn gọi hàm Wasm liên tục trong vòng lặp, chi phí này sẽ nuốt sạch lợi thế tốc độ. Cách xử lý tốt nhất là gom dữ liệu thành một mảng lớn, đẩy vào Wasm xử lý một lần rồi lấy kết quả ra.

2. Chú ý kiểu dữ liệu

Việc refactor dễ gây lỗi do sự khác biệt hệ thống kiểu. Rust phân chia rõ rệt u32, i64, f32 trong khi JS chỉ có Number. Hãy viết Unit Test bao phủ ít nhất 85% logic phía JS trước khi chuyển đổi để đảm bảo kết quả đối chiếu chính xác.

3. Khó khăn khi Debug

Dù Chrome DevTools đã hỗ trợ, việc debug Wasm vẫn khá vất vả so với JS thuần. Lời khuyên của mình là hãy kiểm tra logic thật kỹ ở phía Rust bằng cargo test trước khi biên dịch.

Kết luận: Đừng dùng Wasm chỉ vì nó “ngầu”

Hãy chỉ cân nhắc WebAssembly khi ứng dụng của bạn cần xử lý đồ họa, video, hoặc các thuật toán mã hóa nặng nề. Wasm không thay thế JavaScript mà bổ trợ cho những điểm yếu của nó. Việc phối hợp nhịp nhàng cả hai sẽ giúp ứng dụng web của bạn đạt tới đẳng cấp của phần mềm desktop.

Share:
Tags: