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

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.

Source: developer.mozilla.org