Questions
4 of 20
1What is a Web Worker and why do we need it? What problem does it solve in the browser?
2What are the three types of Web Workers? How do they differ from each other?
3How do you create a Web Worker and communicate with it?
4What is the postMessage / onmessage pattern? Is communication synchronous or asynchronous?
5What APIs and features are not available inside a Web Worker? (e.g., DOM, window, document)
6What is the Structured Clone Algorithm? How is it different from JSON serialization? What types can and cannot be cloned?
7What are Transferable Objects? How does transferring an ArrayBuffer differ from cloning it, and why does it matter for performance?
8How do you handle errors inside a Web Worker? What events are available and what information do they expose?
9What is a Shared Worker? How can multiple browser tabs communicate through one? What are its limitations?
10How do you terminate a Web Worker? What's the difference between worker.terminate() and self.close()?
11How would you architect a thread pool using Web Workers to process a large task queue efficiently?
12What is SharedArrayBuffer and Atomics? How do they enable true shared memory between the main thread and workers? What security headers are required to use them?
13What are the performance trade-offs of using Web Workers? When can they actually hurt performance (e.g., small tasks, frequent postMessage calls)?
14How would you use Web Workers with WebAssembly (WASM) for CPU-intensive tasks? What makes this combination powerful?
15How do Module Workers work (type: 'module')? What advantages do they offer over classic workers?
16In a React or Vue app, how would you integrate a Web Worker cleanly without breaking the component lifecycle? Have you used libraries like comlink — how does it simplify the worker communication model?
17What is the lifecycle of a Service Worker (install → activate → fetch)? How do you handle cache versioning and old worker cleanup?
18What is the difference between cache.put(), cache.add(), and cache.addAll()? How do you implement a cache-first vs network-first strategy?
19How do you communicate between a Service Worker and the main thread? What is the role of BroadcastChannel vs postMessage here?
20Can Web Workers access localStorage?
04 / 20

What is the postMessage / onmessage pattern? Is communication synchronous or asynchronous?

Difficulty: 5/10
window messaging, cross-origin communication, asynchronous APIs

postMessage sends data, onmessage receives it. Communication is asynchronous and uses event-driven model.

postMessage queues a message in the recipient's event loop. The receiving side processes the message via onmessage callback when the thread is idle. This is non-blocking; multiple messages can be queued and processed in order. No direct return values; use reply messages for two-way communication.

Scenario Questions

0-2 years experience

  1. 1You need to send a simple string from an iframe to its parent page using postMessage. How would you set it up, and what do you need to check on the receiving side?
  2. 2If the parent page receives a message but the onmessage handler never fires, what are common reasons and how would you debug it?
  3. 3What’s the difference between specifying '*' versus a specific origin in the targetOrigin argument?

2-5 years experience

  1. 1We have a web app that loads third‑party widgets in iframes and they need to exchange data via postMessage. One widget sometimes receives stale data. Walk me through how you’d investigate and what async nature of postMessage could affect this.
  2. 2During a refactor we moved the message listener into a shared utility module, and now some messages are lost. Explain why that might happen and what ordering guarantees postMessage provides.
  3. 3Explain the trade‑offs between using postMessage and a shared worker for cross‑origin communication in terms of latency and security.

5-8 years experience

  1. 1Design a robust messaging layer between the main window and multiple sandboxed iframes that need to handle high‑frequency events. How would you ensure ordering, avoid race conditions, and keep the communication asynchronous without blocking the UI?
  2. 2Our application must support fallback for browsers that don’t support postMessage. How would you architect a polyfill that preserves async behavior and what performance implications would you consider?
  3. 3If you need to broadcast a message to dozens of embedded iframes and guarantee delivery within 100 ms, what patterns or optimizations would you apply, and how does the async nature of postMessage influence your design?

8+ years experience

  1. 1We’re migrating a legacy monolith that uses custom URL‑hash polling for cross‑frame communication to postMessage. What architectural changes, testing strategies, and backward‑compatibility concerns would you address at a company‑wide level?
  2. 2Across several teams, different conventions for message payloads and origin checks have caused security incidents. How would you establish a unified contract and governance model for postMessage usage across the organization?
  3. 3Consider a SaaS platform that embeds customer‑hosted widgets on arbitrary domains. How would you design a secure, scalable postMessage protocol that can evolve over time without breaking existing integrations?

Follow-up Questions

  • What would happen if you call postMessage before the target window has finished loading?
  • How does the JavaScript event loop affect when onmessage is invoked?
  • Why is using '*' as targetOrigin considered a security risk?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.