Which Web API offloads expensive work from the main UI thread?

What's really being asked

This question checks if you know that standard JavaScript runs on a single main thread and that heavy computation blocks UI updates. The interviewer wants to see that you can name a true threading primitive available in browsers and explain how to spin it up.

The full answer

First, name the Web Workers API as the correct tool for running JavaScript in a background thread. Second, describe initiation: you create a dedicated worker by calling new Worker and passing the URL of a script file, for example new Worker('processor.js'). Third, explain the message-passing contract: the main thread sends data to the worker using worker.postMessage(largeJsonObject), and the worker processes it and sends results back via self.postMessage(result). Fourth, note that the main thread listens for replies by assigning a function to worker.onmessage, reading event.data to update the UI. Fifth, mention that workers cannot access the DOM directly, so all UI updates must happen on the main thread after receiving the processed data.

The mistakes people make

A red flag is suggesting setTimeout, requestIdleCallback, or async await as a fix. These still schedule work on the main thread and will freeze the UI if the task is CPU-bound. Another mistake is proposing to move the JSON parsing into a Promise without a worker; Promises do not create new threads. Some candidates also forget that the Worker constructor requires a separate script file or a valid URL, and they omit the postMessage step entirely.

What usually comes next

The interviewer may ask how to transfer large buffers efficiently without copying, which is when you would mention the Transferable Objects syntax in postMessage. They might ask about SharedArrayBuffer for true shared memory, or how to handle errors in a worker using the onerror event. Another follow-up is how to terminate a worker with worker.terminate() when the job is done to free resources.

A concrete example

Imagine a dashboard that receives a ten megabyte JSON payload. On the main thread, calling JSON.parse would block interactions for several hundred milliseconds. Instead, you instantiate a worker with const worker = new Worker('json-parser.js'). In the main file, you fetch the file and then call worker.postMessage(jsonText). Inside json-parser.js, you write self.onmessage = function(event) { const data = JSON.parse(event.data); self.postMessage(data); }. Back in the main thread, worker.onmessage receives the parsed object in event.data and renders the charts without dropping frames.