Questions
7 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?
javascriptjavascript
Basics
Engine
JIT
V8
Event Loop and Runtime
Concurrency and Threading
Bytecode and Parsing
Execution Context
Data Types
Functions
String Operations
Array Operations
this
Call Apply Bind
Closure
Objects
ES6 Classes
Events
ES6
Promises
Iterator and Generator
Error Handling
Web Workers
PWA
Web Sockets
Web Assembly
Garbage Collector
Modules
Browser APIS
Functional Programming
Currying
Higher Order Functions
Memoisation
Security
Code
Polyfills
07 / 20

What are Transferable Objects? How does transferring an ArrayBuffer differ from cloning it, and why does it matter for performance?

Difficulty: 5/10
Transferable Objects, ArrayBuffer cloning, performance

Transferable objects move ownership from one thread to another, zero-copy. After transfer, the original thread loses access. This is faster than cloning for large buffers.

Cloning copies the entire buffer, doubling memory usage. Transferring moves the underlying memory, avoiding copy. Use postMessage(data, [buffer]) to transfer. Supported types: ArrayBuffer, MessagePort, ImageBitmap, OffscreenCanvas.

Scenario Questions

0-2 years experience

  1. 1You need to send a large image buffer from the main thread to a Web Worker using postMessage. How would you use a Transferable Object to do this, and what would happen to the original ArrayBuffer after the transfer?
  2. 2If you accidentally omitted the transferable list when posting an ArrayBuffer to a worker, what would the browser do, and how would that affect memory usage?

2-5 years experience

  1. 1Your team notices a slowdown when streaming video frames to a worker. You suspect cloning the ArrayBuffer each time is the culprit. How would you modify the code to use transfer, and what edge cases must you guard against?
  2. 2During debugging you see that after transferring an ArrayBuffer to a worker, the main thread throws a TypeError when trying to read it. What could cause this, and how would you fix it?

5-8 years experience

  1. 1Design a messaging layer between the UI thread and a pool of workers that processes large binary payloads. Explain how you would decide when to transfer versus clone buffers, and how you would handle back‑pressure and error recovery.
  2. 2In a high‑throughput real‑time analytics pipeline, you need to move tens of megabytes of data per second between workers. What performance metrics would you monitor to verify that using Transferable Objects is giving you the expected gains, and what fallback strategy would you implement if a browser doesn’t support them?

8+ years experience

  1. 1Your organization is migrating a legacy codebase that uses postMessage with deep‑cloned objects for audio processing. Outline a migration plan to adopt Transferable Objects across multiple teams, addressing compatibility, testing, and documentation concerns.
  2. 2When designing a cross‑team shared library for handling binary data in a web app, how would you expose an API that abstracts away the difference between cloning and transferring, ensuring future maintainability and preventing misuse?

Follow-up Questions

  • Can you quantify the memory savings when transferring versus cloning a 10 MB ArrayBuffer?
  • What browsers or environments might not support Transferable Objects, and how would you handle those cases?
  • How does the structured clone algorithm treat other transferable types like MessagePort or ImageBitmap compared to ArrayBuffer?
Share

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