Web Worker Heavy Task Demo - Online Non‑Blocking

A Web Worker is a JavaScript feature that allows you to run scripts in a background thread, separate from the main browser thread. This means heavy computations can be performed without blocking the user interface, keeping the page responsive. Workers communicate with the main thread via a message-passing system using postMessage() and onmessage.

JavaScript runs on a single main thread (the UI thread). When you execute CPU-intensive code — like calculating large prime numbers, processing big arrays, or complex algorithms — that thread is occupied and cannot respond to user input, render updates, or run animations. This causes the page to appear frozen or unresponsive until the computation finishes.

Use Web Workers for: CPU-intensive tasks (cryptography, image processing, data parsing), large dataset operations (sorting, filtering millions of records), real-time calculations (physics simulations, game logic), and any task lasting over 50ms that would cause noticeable UI jank. For quick operations under 16ms (one frame), a worker is usually overkill.

Web Workers cannot access the DOM, window object, or document directly. They cannot manipulate HTML elements. Communication is limited to structured cloning of data via messages. They cannot access localStorage or sessionStorage directly (though they can use IndexedDB). Each worker also consumes additional memory and has a startup cost.

Yes! You can spawn multiple Web Workers to take advantage of multi-core processors. Use navigator.hardwareConcurrency to detect the number of available logical cores. For truly parallel processing, divide your work across multiple workers — each runs independently on a separate thread. Just be mindful of memory overhead per worker.

Call worker.terminate() from the main thread to immediately stop a worker. This kills the worker thread instantly without allowing any cleanup inside the worker. Alternatively, you can implement a cooperative cancellation pattern by sending a custom message (e.g., {cmd: 'stop'}) and having the worker check for it periodically during its computation.

Web Workers are supported in all modern browsers: Chrome 4+, Firefox 3.5+, Safari 4+, Edge 12+, and Opera 10.6+. They've been widely available since 2009-2010. The API is stable and production-ready. For older IE (10 and below), limited support exists but is not recommended for modern development.

This demo calculates all prime numbers up to a specified limit using trial division. The "With Worker" button offloads the calculation to a Web Worker, so the main thread counter keeps running smoothly. The "Without Worker" button runs the identical calculation on the main thread, causing the counter to freeze — visually demonstrating the blocking effect. Watch the heartbeat dot and counter to see the difference in real time.

Web Workers are for offloading heavy computation from the main thread. They're tied to a specific page and die when the page closes. Service Workers act as a network proxy between the browser and server, enabling offline functionality, push notifications, and background sync. Service Workers persist across pages and browser restarts, while Web Workers are temporary computation helpers.

A Web Worker doesn't make individual operations faster — the CPU speed is the same. The benefit is that the main thread remains free to handle user interaction, rendering, and animations. For multi-core systems, multiple workers can achieve true parallelism, potentially completing a divided task faster overall. The perceived performance gain comes from the UI staying responsive, not from raw speed improvement.