Web Worker Fibonacci Demo - Online Non‑Blocking Calculation

A Web Worker is a JavaScript feature that allows you to run scripts in a background thread, separate from the main browser thread (the UI thread). This means heavy computations can run without blocking user interactions like clicks, scrolling, or animations. Workers communicate with the main thread via postMessage() and onmessage event handlers. Since workers run in a separate global context, they cannot directly access the DOM, window, or document objects.

JavaScript in browsers is single-threaded by default. When you run a synchronous, CPU-intensive task (like computing Fibonacci recursively) on the main thread, it occupies the thread entirely until completion. During this time, the browser cannot process other tasks—including rendering updates, handling user input, or running requestAnimationFrame callbacks. This causes the animation ball to freeze, timers to stop, and the page to become unresponsive. This demo makes that invisible bottleneck visible.

Web Workers are ideal for CPU-bound tasks that would otherwise degrade the user experience. Common use cases include: processing large datasets, image or video manipulation, cryptographic operations, parsing large JSON/CSV files, complex mathematical calculations, spell-checking, and real-time data compression. As a rule of thumb, if a task takes more than 50-100ms, consider offloading it to a Web Worker to maintain a smooth 60fps user experience.

Web Workers have several important limitations: (1) They cannot access the DOM, window, or document. (2) Data is passed via structured cloning (copy, not share), which has overhead for large objects. (3) Each worker has memory overhead (~2-5MB+). (4) Workers cannot access localStorage or sessionStorage directly. (5) Debugging workers can be more challenging. For shared memory scenarios, SharedArrayBuffer can be used, but it requires specific security headers (COOP/COEP).

The Fibonacci sequence is frequently used in performance benchmarking because its naive recursive implementation has exponential time complexity O(2ⁿ). This means small increases in n lead to dramatically longer computation times—making it perfect for demonstrating the difference between blocking and non-blocking execution. For n=40, the function makes ~330 million recursive calls; for n=45, ~3.7 billion calls. This exponential growth visually amplifies the UI-blocking problem that Web Workers solve.

Yes! You can terminate a Web Worker immediately using worker.terminate(). This stops the worker's execution instantly without allowing it to finish or clean up. There's no way to "gracefully" cancel a worker from the outside—the worker must cooperatively check a flag if you need graceful cancellation. In this demo, the Cancel button calls terminate() to abort an ongoing computation. This is one advantage workers have over main-thread computations, which cannot be interrupted once started.

Web Workers are supported in all modern browsers, including Chrome (4+), Firefox (3.5+), Safari (4+), Edge (12+), and Opera (11.5+). Mobile browsers on iOS and Android also fully support Web Workers. The API has been a W3C standard since 2009. BigInt serialization via structured cloning (used in this demo for large Fibonacci numbers) is supported in Chrome 67+, Firefox 68+, Safari 14+, and Edge 79+. For older browsers, you can serialize BigInt results as strings for compatibility.