What are Web Workers and how do they enable parallel processing in the browser?

Question

At a data visualization company: "Our chart rendering blocks the main thread for 2 seconds on 100K data points. Users can't interact during that time."

Interview OS Community · Accepted Answer

## Web Workers run in separate threads

```javascript
// main.js
const worker = new Worker("chart-worker.js");
worker.postMessage({ type: "render", data: largeDataset });
worker.onmessage = (e) => { document.getElementById("chart").innerHTML = e.data.chartSVG; };

// chart-worker.js — doesn't block UI!
self.onmessage = (e) => {
  const result = heavyChartComputation(e.data.data);
  self.postMessage({ chartSVG: result });
};
```

| Can Access | Cannot Access |
|-----------|---------------|
| fetch(), WebSocket | DOM (document, window) |
| IndexedDB | localStorage |
| importScripts() | UI elements |

Main thread stays interactive while worker processes data. Small overhead (~50ms to start worker).

Loading Application

What are Web Workers and how do they enable parallel processing in the browser?

Question Details

Suggested Solution

Web Workers run in separate threads

Discussion (0)