No Login Data Private Local Save

Web Worker Heavy Task Demo - Online Non‑Blocking

9
0
0
0
Main Thread Counter
0 ms
Thread: Responsive
Cores: --
500,000
Higher values = longer computation
Estimated: ~2-6 sec (varies by device)

With Web Worker

Non-blocking β€” UI stays responsive

Elapsed β€”
Primes Found β€”
Status Idle

Without Web Worker

Blocking β€” UI freezes during computation

Elapsed β€”
Primes Found β€”
Status Idle

Last Run Comparison

Metric With Worker Without Worker
Execution Time β€” β€”
Primes Found β€” β€”
UI Remained Responsive Yes No β€” Froze
User Could Interact Yes No
Can Be Cancelled Yes (terminate) No

Frequently Asked Questions

What is a Web Worker?
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.
Why does my web page freeze during heavy computation?
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.
When should I use Web Workers?
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.
What are the limitations of Web Workers?
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.
Can I use multiple Web Workers at once?
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.
How do I stop or cancel a running Web 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.
Which browsers support Web Workers?
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.
How does this demo tool work?
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.
What's the difference between Web Workers and Service Workers?
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.
How much faster is a Web Worker compared to the main thread?
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.