Introduction to WebAssembly with Rust: Tutorial, Performance Test, and Best Practices

What is WebAssembly

WebAssembly (wasm) is a low‑level binary instruction format that can run in modern browsers. It provides a compact, near‑native performance compilation target for languages such as C, C++, and Rust and can interoperate with JavaScript.

Use Cases

It enables running libraries like ffmpeg or opencv in the browser, and powers AI/ML frameworks such as tensorflow.js and paddle.js, extending JavaScript rather than replacing it.

Compatibility

All major desktop browsers support wasm, while mobile support is still catching up; developers should consider target platforms accordingly.

History and Speed

Wasm evolved from asm.js to a binary format compiled by toolchains, offering smaller size, faster download, and execution because it is typed, pre‑optimized, and does not require garbage collection.

Getting Started with Rust

Install Rust via

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

, add the cargo environment, configure a Tsinghua mirror, then install wasm‑pack and cargo‑generate:

cargo install wasm-pack
cargo install cargo-generate

Building a Simple Demo

Generate a project with

cargo generate --git https://github.com/rustwasm/wasm-pack-template

, edit src/lib.rs to expose a greeting function and a recursive Fibonacci function, then run wasm-pack build. The output includes a .wasm binary and JavaScript glue code.

Running the Demo

Initialize a web app with npm init wasm-app www, install dependencies, and start the server with npm run start. The page shows an alert from the Rust function.

Performance Comparison

Using the Fibonacci benchmark, the wasm implementation runs roughly half the time of the pure JavaScript version for inputs 40‑45, saving 400 ms to 4.6 s as the recursion depth grows.

When to Use WebAssembly

For most everyday UI logic wasm is unnecessary, but it shines in compute‑heavy tasks such as image/video processing, AI inference, or porting existing C/C++ libraries to the web.

Conclusion

The tutorial demonstrates that WebAssembly is a powerful frontend extension for performance‑critical workloads, especially when combined with Rust.