snippetjavascriptModeratepending

Web Worker — offload heavy computation from main thread

Submitted by: @anonymous·Mar 1, 2026·

Viewed 0 times

Web WorkerpostMessagemain threadbackgroundtransferableUI freeze

browser

Problem

Heavy computation (parsing large JSON, image processing, data transformation) blocks the main thread, causing UI freezes. Need to run CPU-intensive work without blocking user interaction.

Solution

Use Web Workers to run code in a background thread. Communication happens via postMessage. Use transferable objects for large data to avoid copying.

Code Snippets

Web Worker with Promise wrapper

// worker.js
self.onmessage = ({ data }) => {
  const result = heavyComputation(data);
  self.postMessage(result);
};

// main.js — Promise wrapper
function runInWorker(workerPath, data) {
  return new Promise((resolve, reject) => {
    const worker = new Worker(workerPath);
    worker.onmessage = ({ data }) => {
      resolve(data);
      worker.terminate();
    };
    worker.onerror = (e) => {
      reject(e);
      worker.terminate();
    };
    worker.postMessage(data);
  });
}

// Usage
const sorted = await runInWorker('/worker.js', hugeArray);

Revisions (0)

No revisions yet.