Web Workers for Background Processing

Web Workers enable multi-threaded JavaScript. Here's how to use them for heavy computation without blocking the UI.

Basic Web Worker#

// worker.js
self.onmessage = function(event) {
  const { data } = event;

  // Heavy computation
  const result = processData(data);

  // Send result back
  self.postMessage(result);
};

function processData(data) {
  // CPU-intensive work
  let result = 0;
  for (let i = 0; i < data.iterations; i++) {
    result += Math.sqrt(i);
  }
  return result;
}

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

worker.onmessage = function(event) {
  console.log('Result:', event.data);
};

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

worker.postMessage({ iterations: 1000000 });

TypeScript Web Worker#

// worker.ts
interface WorkerMessage {
  type: 'process' | 'cancel';
  payload?: any;
}

interface WorkerResponse {
  type: 'result' | 'progress' | 'error';
  data: any;
}

self.onmessage = (event: MessageEvent<WorkerMessage>) => {
  const { type, payload } = event.data;

  switch (type) {
    case 'process':
      try {
        const result = heavyComputation(payload);
        self.postMessage({ type: 'result', data: result } as WorkerResponse);
      } catch (error) {
        self.postMessage({
          type: 'error',
          data: (error as Error).message,
        } as WorkerResponse);
      }
      break;

    case 'cancel':
      // Handle cancellation
      break;
  }
};

function heavyComputation(data: any): any {
  // Report progress
  for (let i = 0; i <= 100; i += 10) {
    self.postMessage({ type: 'progress', data: i } as WorkerResponse);
  }

  return processedResult;
}

// Export empty to make it a module
export {};

// useWorker.ts
import { useEffect, useRef, useState, useCallback } from 'react';

interface UseWorkerOptions<T, R> {
  onResult?: (result: R) => void;
  onProgress?: (progress: number) => void;
  onError?: (error: string) => void;
}

function useWorker<T, R>(
  workerFactory: () => Worker,
  options: UseWorkerOptions<T, R> = {}
) {
  const workerRef = useRef<Worker | null>(null);
  const [isProcessing, setIsProcessing] = useState(false);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    workerRef.current = workerFactory();

    workerRef.current.onmessage = (event) => {
      const { type, data } = event.data;

      switch (type) {
        case 'result':
          setIsProcessing(false);
          options.onResult?.(data);
          break;
        case 'progress':
          setProgress(data);
          options.onProgress?.(data);
          break;
        case 'error':
          setIsProcessing(false);
          options.onError?.(data);
          break;
      }
    };

    return () => {
      workerRef.current?.terminate();
    };
  }, [workerFactory]);

  const process = useCallback((data: T) => {
    setIsProcessing(true);
    setProgress(0);
    workerRef.current?.postMessage({ type: 'process', payload: data });
  }, []);

  const cancel = useCallback(() => {
    workerRef.current?.postMessage({ type: 'cancel' });
    setIsProcessing(false);
  }, []);

  return { process, cancel, isProcessing, progress };
}

// Usage
function DataProcessor() {
  const [result, setResult] = useState(null);

  const { process, isProcessing, progress } = useWorker<InputData, OutputData>(
    () => new Worker(new URL('./worker.ts', import.meta.url)),
    {
      onResult: setResult,
      onError: (error) => console.error(error),
    }
  );

  return (
    <div>
      <button onClick={() => process(inputData)} disabled={isProcessing}>
        Process
      </button>
      {isProcessing && <progress value={progress} max={100} />}
      {result && <Results data={result} />}
    </div>
  );
}

Transferable Objects#

// Transfer ownership for better performance
// Useful for large ArrayBuffers

// worker.js
self.onmessage = (event) => {
  const buffer = event.data;

  // Process the buffer
  const result = new Uint8Array(buffer);
  for (let i = 0; i < result.length; i++) {
    result[i] = result[i] * 2;
  }

  // Transfer back (buffer is moved, not copied)
  self.postMessage(result.buffer, [result.buffer]);
};

// main.js
const buffer = new ArrayBuffer(1024 * 1024); // 1MB

// Transfer ownership (buffer becomes unusable in main thread)
worker.postMessage(buffer, [buffer]);

// buffer.byteLength is now 0

// Transferable types:
// - ArrayBuffer
// - MessagePort
// - ImageBitmap
// - OffscreenCanvas

Worker Pool#

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

  constructor(
    private workerScript: string,
    private poolSize: number = navigator.hardwareConcurrency || 4
  ) {
    for (let i = 0; i < poolSize; i++) {
      const worker = new Worker(workerScript);
      this.workers.push(worker);
      this.availableWorkers.push(worker);
    }
  }

  exec<T>(data: any): Promise<T> {
    return new Promise((resolve, reject) => {
      const task = { data, resolve, reject };

      if (this.availableWorkers.length > 0) {
        this.runTask(task);
      } else {
        this.taskQueue.push(task);
      }
    });
  }

  private runTask(task: typeof this.taskQueue[0]) {
    const worker = this.availableWorkers.pop()!;

    worker.onmessage = (event) => {
      task.resolve(event.data);
      this.releaseWorker(worker);
    };

    worker.onerror = (error) => {
      task.reject(new Error(error.message));
      this.releaseWorker(worker);
    };

    worker.postMessage(task.data);
  }

  private releaseWorker(worker: Worker) {
    this.availableWorkers.push(worker);

    if (this.taskQueue.length > 0) {
      const nextTask = this.taskQueue.shift()!;
      this.runTask(nextTask);
    }
  }

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

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

// Process multiple items in parallel
const results = await Promise.all(
  items.map((item) => pool.exec(item))
);

pool.terminate();

Shared Worker#

// shared-worker.js
// Single worker shared across tabs/windows

const connections: MessagePort[] = [];

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

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

    switch (type) {
      case 'broadcast':
        // Send to all connected tabs
        connections.forEach((conn) => {
          conn.postMessage({ type: 'message', data });
        });
        break;

      case 'sync':
        // Synchronize state across tabs
        port.postMessage({ type: 'state', data: sharedState });
        break;
    }
  };

  port.start();
};

// main.js
const sharedWorker = new SharedWorker('shared-worker.js');

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

sharedWorker.port.start();
sharedWorker.port.postMessage({ type: 'broadcast', data: 'Hello from tab!' });

Comlink for Easy Workers#

// worker.ts with Comlink
import * as Comlink from 'comlink';

const api = {
  async heavyComputation(data: number[]): Promise<number> {
    // Simulate heavy work
    await new Promise((r) => setTimeout(r, 1000));
    return data.reduce((a, b) => a + b, 0);
  },

  processImage(imageData: ImageData): ImageData {
    // Process image pixels
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
      // Grayscale conversion
      const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
      data[i] = data[i + 1] = data[i + 2] = avg;
    }
    return imageData;
  },
};

Comlink.expose(api);

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

const worker = new Worker(new URL('./worker.ts', import.meta.url));
const api = Comlink.wrap<typeof import('./worker').api>(worker);

// Use like regular async functions
const result = await api.heavyComputation([1, 2, 3, 4, 5]);
console.log(result); // 15

OffscreenCanvas#

// Offload canvas rendering to worker
// main.js
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const offscreen = canvas.transferControlToOffscreen();

const worker = new Worker('canvas-worker.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);

// canvas-worker.js
let canvas: OffscreenCanvas;
let ctx: OffscreenCanvasRenderingContext2D;

self.onmessage = (event) => {
  if (event.data.canvas) {
    canvas = event.data.canvas;
    ctx = canvas.getContext('2d')!;
    render();
  }
};

function render() {
  // Render loop in worker
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw complex graphics
  for (let i = 0; i < 1000; i++) {
    ctx.fillRect(
      Math.random() * canvas.width,
      Math.random() * canvas.height,
      10,
      10
    );
  }

  requestAnimationFrame(render);
}

Best Practices#

When to Use:
✓ Heavy computations (sorting, parsing)
✓ Image/video processing
✓ Data transformation
✓ Complex calculations

When NOT to Use:
✗ Simple operations
✗ DOM manipulation (not allowed)
✗ Small data sets
✗ Frequent small messages

Performance:
✓ Use transferable objects
✓ Minimize message passing
✓ Pool workers for many tasks
✓ Terminate unused workers

Communication:
✓ Structure messages clearly
✓ Handle errors properly
✓ Consider using Comlink
✓ Batch small messages

Web Workers enable parallel processing in JavaScript without blocking the main thread. Use them for CPU-intensive tasks, leverage transferable objects for large data, and consider worker pools for concurrent processing. Libraries like Comlink simplify the communication API significantly.