How do you create a Web Worker and communicate with it?

Q: How do you create a Web Worker and communicate with it?

const worker = new Worker('worker.js'); worker.postMessage('Hello'); worker.onmessage = (e) => console.log('Received:', e.data); onmessage = (e) => { console.log('Main sent:', e.data); postMessage('Reply from worker'); };

Difficulty: 5/10

Worker creation, Message passing, Performance optimization

Create a worker with `new Worker('worker.js')`, communicate using `postMessage` and `onmessage` events.

Main thread

worker.js

Scenario Questions

0-2 years experience

1Imagine you need to offload a heavy image‑processing loop from the UI thread. How would you set up a Web Worker to run that code and get the result back?
2If you create a worker with `new Worker('worker.js')` and want to send a JSON object to it, what code would you write on both sides to exchange the message?

2-5 years experience

1You added a Web Worker to fetch and parse a large CSV file, but the UI still freezes intermittently. What could be causing that, and how would you debug it?

Follow-up Questions

What happens if the worker script fails to load?
How would you handle sending large binary data efficiently?
When would you choose a SharedWorker over a dedicated Worker?

How do you create a Web Worker and communicate with it?

Create a worker with new Worker('worker.js'), communicate using postMessage and onmessage events.

Scenario Questions

Follow-up Questions

How do you create a Web Worker and communicate with it?

Create a worker with new Worker('worker.js'), communicate using postMessage and onmessage events.

Scenario Questions

Follow-up Questions

Create a worker with `new Worker('worker.js')`, communicate using `postMessage` and `onmessage` events.

Create a worker with `new Worker('worker.js')`, communicate using `postMessage` and `onmessage` events.