Jeff Bruchado
Back to blog

WebAssembly and JavaScript: How to Combine for Extreme Performance in 2025

Hello HaWkers, if you've ever encountered performance limitations in JavaScript for computationally intensive tasks, WebAssembly might be the solution you're looking for. In 2025, this technology has matured and become an essential tool in web developers' arsenal.

In this guide, we'll explore how to combine WebAssembly with JavaScript to create applications that run close to native speed, directly in the browser.

What is WebAssembly

WebAssembly (Wasm) is a binary instruction format that runs in a virtual machine inside the browser. Unlike JavaScript which is interpreted, Wasm is compiled, allowing much faster execution for certain tasks.

Main Features

  • Performance: Execution close to native speed
  • Portability: Runs in all modern browsers
  • Security: Executes in isolated sandbox
  • Interoperability: Works alongside JavaScript
  • Languages: Can be compiled from C, C++, Rust, Go and others

🚀 Benchmark: Intensive mathematical operations in WebAssembly can be up to 20x faster than the equivalent in pure JavaScript.

When to Use WebAssembly

WebAssembly is not a replacement for JavaScript, but a complement. Use Wasm when:

Ideal Use Cases

1. Image and Video Processing:

// Image filters, compression, codecs
// Example: Photoshop in browser, video editors

2. Games and 3D Graphics:

// Game engines, physics simulations
// Example: Unity, Unreal Engine for web

3. Cryptography and Security:

// Hash algorithms, encryption
// Example: Crypto wallets, authentication

4. Audio Processing:

// Synthesizers, real-time effects
// Example: DAWs in browser

5. Scientific Computing:

// Simulations, local machine learning
// Example: TensorFlow in browser

When NOT to Use

  • Simple DOM manipulation
  • HTTP requests and APIs
  • Basic business logic
  • Common user interfaces

Your First WebAssembly Project

Let's create a practical example: an optimized prime number calculator.

Environment Setup

You can write Wasm using various languages. We'll use AssemblyScript, which has syntax similar to TypeScript.

# Create the project
mkdir wasm-primes
cd wasm-primes
npm init -y

# Install AssemblyScript
npm install --save-dev assemblyscript

# Initialize AssemblyScript project
npx asinit .

Writing AssemblyScript Code

// assembly/index.ts

// Function to check if a number is prime
export function isPrime(n: i32): bool {
  if (n <= 1) return false;
  if (n <= 3) return true;
  if (n % 2 == 0 || n % 3 == 0) return false;

  let i: i32 = 5;
  while (i * i <= n) {
    if (n % i == 0 || n % (i + 2) == 0) {
      return false;
    }
    i += 6;
  }
  return true;
}

// Count primes in a range
export function countPrimes(start: i32, end: i32): i32 {
  let count: i32 = 0;
  for (let i = start; i <= end; i++) {
    if (isPrime(i)) {
      count++;
    }
  }
  return count;
}

// Find the nth prime
export function nthPrime(n: i32): i32 {
  if (n <= 0) return -1;

  let count: i32 = 0;
  let num: i32 = 1;

  while (count < n) {
    num++;
    if (isPrime(num)) {
      count++;
    }
  }
  return num;
}

Compiling to WebAssembly

# Compile the code
npm run asbuild

# This generates:
# - build/release.wasm (optimized)
# - build/debug.wasm (for debugging)

Integrating With JavaScript

Now let's use our Wasm module in a JavaScript application.

Loading the Module

// src/wasm-loader.js

async function loadWasmModule() {
  // Fetch the .wasm file
  const response = await fetch('./build/release.wasm');
  const wasmBuffer = await response.arrayBuffer();

  // Instantiate the module
  const wasmModule = await WebAssembly.instantiate(wasmBuffer, {
    env: {
      abort: () => console.error('Wasm aborted!')
    }
  });

  return wasmModule.instance.exports;
}

// Usage
const wasm = await loadWasmModule();

console.log(wasm.isPrime(17)); // true
console.log(wasm.countPrimes(1, 1000)); // 168
console.log(wasm.nthPrime(100)); // 541

Comparing Performance

// benchmark.js

// Pure JavaScript version
function isPrimeJS(n) {
  if (n <= 1) return false;
  if (n <= 3) return true;
  if (n % 2 === 0 || n % 3 === 0) return false;

  let i = 5;
  while (i * i <= n) {
    if (n % i === 0 || n % (i + 2) === 0) return false;
    i += 6;
  }
  return true;
}

function countPrimesJS(start, end) {
  let count = 0;
  for (let i = start; i <= end; i++) {
    if (isPrimeJS(i)) count++;
  }
  return count;
}

// Benchmark
async function runBenchmark() {
  const wasm = await loadWasmModule();
  const iterations = 10;
  const range = 1000000;

  // JavaScript test
  console.time('JavaScript');
  for (let i = 0; i < iterations; i++) {
    countPrimesJS(1, range);
  }
  console.timeEnd('JavaScript');

  // WebAssembly test
  console.time('WebAssembly');
  for (let i = 0; i < iterations; i++) {
    wasm.countPrimes(1, range);
  }
  console.timeEnd('WebAssembly');
}

runBenchmark();

// Typical result:
// JavaScript: ~4500ms
// WebAssembly: ~800ms
// WebAssembly is ~5.6x faster in this case

Real Use Case: Image Processing

Let's create a more practical example: applying a blur filter to an image.

AssemblyScript Code For Blur

// assembly/image.ts

// Simplified Gaussian blur
export function applyBlur(
  imageData: usize,
  width: i32,
  height: i32,
  radius: i32
): void {
  const size = width * height * 4; // RGBA
  const temp = new Uint8Array(size);

  // Copy data to temporary buffer
  for (let i = 0; i < size; i++) {
    temp[i] = load<u8>(imageData + i);
  }

  // Apply horizontal blur
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      let r = 0, g = 0, b = 0, count = 0;

      for (let dx = -radius; dx <= radius; dx++) {
        const nx = x + dx;
        if (nx >= 0 && nx < width) {
          const idx = (y * width + nx) * 4;
          r += temp[idx];
          g += temp[idx + 1];
          b += temp[idx + 2];
          count++;
        }
      }

      const outIdx = (y * width + x) * 4;
      store<u8>(imageData + outIdx, r / count);
      store<u8>(imageData + outIdx + 1, g / count);
      store<u8>(imageData + outIdx + 2, b / count);
    }
  }

  // Apply vertical blur (same process)
  // ... similar code for vertical direction
}

Canvas Integration

// image-processor.js

class ImageProcessor {
  constructor() {
    this.wasm = null;
    this.memory = null;
  }

  async init() {
    const response = await fetch('./build/image.wasm');
    const wasmBuffer = await response.arrayBuffer();

    // Create shared memory
    this.memory = new WebAssembly.Memory({
      initial: 256, // 256 pages = 16MB
      maximum: 512
    });

    const wasmModule = await WebAssembly.instantiate(wasmBuffer, {
      env: {
        memory: this.memory,
        abort: () => console.error('Abort')
      }
    });

    this.wasm = wasmModule.instance.exports;
  }

  applyBlur(canvas, radius = 5) {
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    // Copy data to Wasm memory
    const wasmMemory = new Uint8Array(this.memory.buffer);
    wasmMemory.set(imageData.data, 0);

    // Apply filter via Wasm
    this.wasm.applyBlur(
      0, // pointer to data
      canvas.width,
      canvas.height,
      radius
    );

    // Copy result back
    imageData.data.set(wasmMemory.slice(0, imageData.data.length));
    ctx.putImageData(imageData, 0, 0);
  }
}

// Usage
const processor = new ImageProcessor();
await processor.init();

const canvas = document.getElementById('myCanvas');
processor.applyBlur(canvas, 10);

Rust For WebAssembly

For more complex projects, Rust is the most popular choice for Wasm due to its performance and safety.

Setup With wasm-pack

# Install Rust (if you don't have it)
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Install wasm-pack
cargo install wasm-pack

# Create project
cargo new --lib wasm-rust-example
cd wasm-rust-example

Cargo Configuration

# Cargo.toml
[package]
name = "wasm-rust-example"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2"

[profile.release]
lto = true
opt-level = 3

Rust Code

// src/lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    if n <= 1 {
        return n as u64;
    }

    let mut a: u64 = 0;
    let mut b: u64 = 1;

    for _ in 2..=n {
        let temp = a + b;
        a = b;
        b = temp;
    }

    b
}

#[wasm_bindgen]
pub fn sum_array(arr: &[i32]) -> i64 {
    arr.iter().map(|&x| x as i64).sum()
}

#[wasm_bindgen]
pub struct Matrix {
    data: Vec<f64>,
    rows: usize,
    cols: usize,
}

#[wasm_bindgen]
impl Matrix {
    #[wasm_bindgen(constructor)]
    pub fn new(rows: usize, cols: usize) -> Matrix {
        Matrix {
            data: vec![0.0; rows * cols],
            rows,
            cols,
        }
    }

    pub fn set(&mut self, row: usize, col: usize, value: f64) {
        self.data[row * self.cols + col] = value;
    }

    pub fn get(&self, row: usize, col: usize) -> f64 {
        self.data[row * self.cols + col]
    }

    pub fn multiply(&self, other: &Matrix) -> Matrix {
        let mut result = Matrix::new(self.rows, other.cols);

        for i in 0..self.rows {
            for j in 0..other.cols {
                let mut sum = 0.0;
                for k in 0..self.cols {
                    sum += self.get(i, k) * other.get(k, j);
                }
                result.set(i, j, sum);
            }
        }

        result
    }
}

Build and Usage

# Compile for web
wasm-pack build --target web
// Usage in JavaScript
import init, { fibonacci, Matrix } from './pkg/wasm_rust_example.js';

async function main() {
  await init();

  // Fast Fibonacci
  console.log(fibonacci(50)); // 12586269025

  // Matrix multiplication
  const a = new Matrix(100, 100);
  const b = new Matrix(100, 100);

  // Fill matrices...
  const result = a.multiply(b);
}

main();

Tools and Ecosystem

Essential Tools

Tool Use Language
wasm-pack Build for Rust Rust
AssemblyScript TypeScript-like TypeScript
Emscripten C/C++ to Wasm C/C++
TinyGo Go to Wasm Go
wasm-bindgen JS-Wasm binding Rust

Frameworks and Libraries

  • Yew: Frontend framework in Rust with Wasm
  • Blazor: .NET in browser via Wasm
  • ffmpeg.wasm: Video processing in browser
  • sql.js: SQLite compiled to Wasm
  • Pyodide: Python in browser

Best Practices

1. Minimize JS-Wasm Communication

// Bad: many small calls
for (let i = 0; i < 1000; i++) {
  wasm.process(data[i]);
}

// Good: one batch call
wasm.processBatch(data, 1000);

2. Use Shared Memory

// Avoid copying data - use SharedArrayBuffer
const sharedMemory = new SharedArrayBuffer(1024 * 1024);
const view = new Float64Array(sharedMemory);

3. Compile With Optimizations

# AssemblyScript
npx asc assembly/index.ts -O3 --runtime minimal

# Rust
wasm-pack build --release

The Future of WebAssembly

Trends For 2025-2026

1. WASI (WebAssembly System Interface):
Allows Wasm to run outside the browser with system access.

2. Component Model:
Wasm modules that communicate with each other in a standardized way.

3. Garbage Collection:
Native GC support, improving integration with languages like Java and C#.

4. Threading:
Better multithreading support for parallel computing.

Conclusion

WebAssembly and JavaScript are powerful partners. JavaScript remains excellent for application logic, DOM manipulation and APIs, while WebAssembly shines in computationally intensive tasks.

In 2025, the combination of these technologies allows creating web applications that would previously be impossible - from professional video editors to AAA games, all running in the browser with near-native performance.

If you want to explore more about performance in modern JavaScript, I recommend checking out the article ECMAScript 2025: The New JavaScript Features where we explore the latest additions to the language.

Let's go! 🦅

Comments (0)

This article has no comments yet 😢. Be the first! 🚀🦅

Add comments