Master WebAssembly: From Basics to C & Rust Integration for Faster Web Apps

What is WebAssembly?

WebAssembly is a new abstract virtual‑machine instruction set standardized by the W3C, supported by all four major browsers, delivered as a binary .wasm file, and can be loaded, parsed, and executed via standard Web API interfaces.

Why WebAssembly?

JavaScript, created in 1995, drove rapid web growth but its flexible syntax makes large‑scale development difficult and its performance insufficient for demanding scenarios. JIT compilation in V8 improved speed 20‑40×, yet dynamic typing still causes costly recompilations.

Efforts like TypeScript, Dart, and asm.js addressed syntax or performance partially, but none solved the fundamental limitations, prompting the creation of WebAssembly—a safe, efficient, open standard that runs compiled bytecode from high‑level languages in the browser.

How to use WebAssembly?

Q1: How to develop with WebAssembly?

Step 1: High‑level language → Intermediate Representation (IR)

Compile the high‑level language to an intermediate representation, then use the toolchain to generate a .wasm file.

Case 1: C to wasm

Step 1: Environment setup

git

CMake (install from https://blog.csdn.net/xujiuba/article/details/107234040)

System compiler: GCC on Linux, Xcode on macOS, Visual Studio 2015+ on Windows

Python 2.7.x

Step 2: Install Emscripten SDK

git clone https://github.com/emscripten-core/emsdk.git

cd emsdk

./emsdk install latest

./emsdk activate latest

source ./emsdk_env.sh

Step 3: Write C code

Write a simple C program with a main function and a custom function marked with EMSCRIPTEN_KEEPALIVE to prevent elimination.

Step 4: Generate wasm file

emcc -o index.html index.c -O3 -s WASM=1 --shell-file html_template/template.html -s NO_EXIT_RUNTIME=1 -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall']"

-s WASM=1: output a .wasm file

-o index.html: generate HTML/JS that loads the .wasm

-O3: highest optimization level

--shell-file: specify HTML template

NO_EXIT_RUNTIME: keep runtime alive after main returns

EXTRA_EXPORTED_RUNTIME_METHODS=['ccall']: expose ccall helper

Step 5: Call C functions from JavaScript

<button>Click me</button>
<script type="text/javascript">
  document.querySelector('myButton').addEventListener('click', function() {
    var result = Module.ccall('myFunction', null, null, null);
  });
</script>

Case 2: Rust to wasm

Step 1: Environment setup

Install Rust, Node, npm:

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

Configure PATH: export PATH="$PATH:$HOME/.cargo/env" Install wasm-pack: cargo install wasm-pack Step 2: Initialize a Rust project cargo new --lib my-wasm The project structure mirrors a typical frontend bundle; lib.rs holds the logic and Cargo.toml is analogous to package.json.

Step 3: Modify Rust code

Use #[wasm_bindgen] to expose functions to JavaScript.

Step 4: Update Cargo.toml with dependencies

Step 5: Build the wasm package wasm-pack build --target bundler The bundler target creates an npm‑compatible package; the web target produces files that can be imported via relative paths.

Compiles Rust to WebAssembly

Runs wasm‑bindgen to generate JavaScript glue

Creates a pkg directory with the JS and .wasm files

Generates a package.json from Cargo.toml Copies README.md into the package

Q2: How to import a wasm file in JavaScript?

Load the .wasm file as an ArrayBuffer, instantiate it with WebAssembly.instantiate, and then call exported functions.

Q3: How do JS and WebAssembly communicate?

Instantiate the module with a WebAssembly.Memory object; both sides can read/write the shared memory buffer, enabling exchange of strings, numbers, and other data.

Shared memory is a JavaScript object, so it is garbage‑collected when no longer referenced, and the ArrayBuffer boundary prevents WebAssembly from accessing memory outside its allocated range.

Who uses WebAssembly?

Case 1: Squoosh

Squoosh performs client‑side image processing (compression, quantization, etc.) by compiling libraries such as libimagequant, MozJPEG, and WebP to wasm, delivering near‑instant results.

Case 2: eBay Barcode Scanner

eBay’s web barcode scanner uses the ZBar library compiled to wasm, achieving a 50× performance boost. It runs three workers in parallel (ZBar wasm, a custom wasm, and native JS) and uses the fastest result.

This approach ensures compatibility across browsers while delivering the best performance.

Performance comparison

Benchmarks show that for small workloads JavaScript may be slightly faster due to glue‑code overhead, but as computation grows, WebAssembly’s speed advantage becomes significant, with consistent gains across Chrome, Safari, and Firefox.

These results illustrate the current level of WebAssembly support in major browsers.

Reference material:

https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm

https://rustwasm.github.io/book/introduction.html

https://www.joyent.com/blog/improved-wasm-support-coming-to-node

https://github.com/WebAssembly

https://www.rust-lang.org/what/wasm

https://www.ebayinc.com/stories/blogs/tech/webassembly-at-ebay-a-real-world-use-case/