Web Workers: Multithreading in JavaScript

JavaScript is single-threaded, but Web Workers let you run scripts in background threads. Keep your UI responsive while handling heavy computations.

The Problem#

// This blocks the UI
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// UI freezes during calculation
const result = fibonacci(45);
console.log(result);

Dedicated Workers#

Creating a Worker#

// main.js
const worker = new Worker('worker.js');

// Send message to worker
worker.postMessage({ type: 'fibonacci', n: 45 });

// Receive results
worker.onmessage = (event) => {
  console.log('Result:', event.data.result);
};

worker.onerror = (error) => {
  console.error('Worker error:', error.message);
};

// worker.js
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

self.onmessage = (event) => {
  const { type, n } = event.data;

  if (type === 'fibonacci') {
    const result = fibonacci(n);
    self.postMessage({ result });
  }
};

Inline Workers#

// Create worker from blob
function createInlineWorker(fn) {
  const blob = new Blob([`(${fn.toString()})()`], {
    type: 'application/javascript',
  });
  return new Worker(URL.createObjectURL(blob));
}

const worker = createInlineWorker(() => {
  self.onmessage = (e) => {
    const result = e.data * 2;
    self.postMessage(result);
  };
});

worker.postMessage(21);
worker.onmessage = (e) => console.log(e.data); // 42

Transferable Objects#

// Transferring data (zero-copy)
const buffer = new ArrayBuffer(1024 * 1024); // 1MB

// Transfer ownership (fast, but buffer becomes unusable in main thread)
worker.postMessage({ buffer }, [buffer]);
console.log(buffer.byteLength); // 0 - transferred

// In worker
self.onmessage = (event) => {
  const { buffer } = event.data;
  const view = new Uint8Array(buffer);

  // Process data
  for (let i = 0; i < view.length; i++) {
    view[i] = view[i] * 2;
  }

  // Transfer back
  self.postMessage({ buffer }, [buffer]);
};

Worker Pool#

class WorkerPool {
  private workers: Worker[] = [];
  private queue: Array<{
    data: any;
    resolve: (value: any) => void;
    reject: (error: any) => void;
  }> = [];
  private availableWorkers: Worker[] = [];

  constructor(workerScript: string, poolSize: number = navigator.hardwareConcurrency) {
    for (let i = 0; i < poolSize; i++) {
      const worker = new Worker(workerScript);
      worker.onmessage = (event) => this.handleMessage(worker, event);
      worker.onerror = (error) => this.handleError(worker, error);
      this.workers.push(worker);
      this.availableWorkers.push(worker);
    }
  }

  execute<T>(data: any): Promise<T> {
    return new Promise((resolve, reject) => {
      const worker = this.availableWorkers.pop();

      if (worker) {
        this.runTask(worker, data, resolve, reject);
      } else {
        this.queue.push({ data, resolve, reject });
      }
    });
  }

  private runTask(
    worker: Worker,
    data: any,
    resolve: (value: any) => void,
    reject: (error: any) => void
  ) {
    (worker as any)._resolve = resolve;
    (worker as any)._reject = reject;
    worker.postMessage(data);
  }

  private handleMessage(worker: Worker, event: MessageEvent) {
    const resolve = (worker as any)._resolve;
    resolve(event.data);
    this.releaseWorker(worker);
  }

  private handleError(worker: Worker, error: ErrorEvent) {
    const reject = (worker as any)._reject;
    reject(error);
    this.releaseWorker(worker);
  }

  private releaseWorker(worker: Worker) {
    const next = this.queue.shift();
    if (next) {
      this.runTask(worker, next.data, next.resolve, next.reject);
    } else {
      this.availableWorkers.push(worker);
    }
  }

  terminate() {
    this.workers.forEach((worker) => worker.terminate());
  }
}

// Usage
const pool = new WorkerPool('compute-worker.js', 4);

const results = await Promise.all([
  pool.execute({ task: 'hash', data: 'password1' }),
  pool.execute({ task: 'hash', data: 'password2' }),
  pool.execute({ task: 'hash', data: 'password3' }),
]);

Shared Workers#

// Shared across tabs/windows
// shared-worker.js
const connections = [];

self.onconnect = (event) => {
  const port = event.ports[0];
  connections.push(port);

  port.onmessage = (e) => {
    // Broadcast to all connections
    connections.forEach((conn) => {
      conn.postMessage({
        from: connections.indexOf(port),
        message: e.data,
      });
    });
  };

  port.start();
};

// main.js (in multiple tabs)
const worker = new SharedWorker('shared-worker.js');

worker.port.onmessage = (event) => {
  console.log('Received:', event.data);
};

worker.port.start();
worker.port.postMessage('Hello from this tab');

Comlink (Simplified API)#

// With Comlink library
// worker.js
import * as Comlink from 'comlink';

const api = {
  async processImage(imageData) {
    // Heavy processing
    return processedData;
  },

  async calculateStats(data) {
    return {
      mean: data.reduce((a, b) => a + b) / data.length,
      // ... more calculations
    };
  },
};

Comlink.expose(api);

// main.js
import * as Comlink from 'comlink';

const worker = new Worker('worker.js');
const api = Comlink.wrap(worker);

// Call worker methods directly
const stats = await api.calculateStats([1, 2, 3, 4, 5]);
console.log(stats.mean);

Use Cases#

Good for Workers:
✓ Image/video processing
✓ Data parsing (CSV, JSON)
✓ Cryptographic operations
✓ Complex calculations
✓ Compression/decompression
✓ Syntax highlighting

Not for Workers:
✗ DOM manipulation
✗ Simple calculations
✗ Tasks requiring window/document
✗ Short-lived operations

Limitations#

// No access to:
// - window
// - document
// - parent
// - DOM APIs

// Available in workers:
// - fetch()
// - IndexedDB
// - WebSockets
// - setTimeout/setInterval
// - importScripts()
// - navigator (partial)
// - location (read-only)

Conclusion#

Web Workers enable true parallelism in JavaScript. Use them for computationally intensive tasks to keep your UI responsive.

The key is identifying operations that don't need DOM access and can benefit from parallel execution.

Share this article