Tips and Tricks #108: Use Web Workers for Heavy Computations

Move CPU-intensive tasks off the main thread to keep the UI responsive.

Code Snippet

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

function heavyComputation(data) {
  // Expensive operation that would block UI
  return data.reduce((acc, val) => acc + Math.sqrt(val), 0);
}

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

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

// Send data to worker (non-blocking)
worker.postMessage(largeDataArray);

Why This Helps

• Keeps UI responsive during heavy computation
• Utilizes additional CPU cores
• Prevents ‘page unresponsive’ warnings

How to Test

• Compare UI responsiveness with/without worker
• Monitor main thread blocking in DevTools Performance

When to Use

Data parsing, image processing, complex calculations, any task taking >50ms.

Performance/Security Notes

Workers can’t access DOM. Use transferable objects for large data to avoid copying overhead.

References

• https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API

Try this tip in your next project and share your results in the comments!