Web Worker and main thread impact example

See how prime calculation impacts these elements:

CSS animation

JS animation

Results:


Explanation

This demo is finding the closest prime beneath your input with a Sieve of Eratosthenes algorithm.

The “Run Synchronously” button runs the algorithm on the main browser thread. In javascript it’s just calling the function.

The “Calculate with Worker” buttons send your input to a worker thread, and then the function is called there. This means that the browser UI thread isn’t impacted if the calculation takes some time.

Just for fun the worker sends back the entire sieve containing the prime or not prime results for every single number. By default data is copied between the worker and main thread.

The “Calculate with Worker (transfer)” button moves the memory without a copy. On my machine that can save about 100ms when the resulting buffer is large.