New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
A heavy calculation just freezes the page.
What you'll have at the end
A page where a heavy calculation runs in the background and the interface keeps responding to clicks the whole time
You need
A page that can already get a photo's raw pixel data onto a canvas, drawn from an uploaded image or already sitting there, plus one JavaScript function that runs a real, computationally heavy filter over every one of those pixels, called synchronously and directly today.
Not covered
Sharing this worker's state across more than one open browser tab (a SharedWorker) or making the filter run while the page is offline (a Service Worker) aren't covered here: both solve a different problem than keeping one page's own heavy calculation from freezing its own interface.
Leans on
Deep clone a nested object so edits stop leaking into the original
covers what the structured clone algorithm can and can't carry across (functions, class instances), the same algorithm postMessage uses by default before you switch to a transfer
Turn a failed fetch request into a message the user understands
the same pattern, turning a failed async operation into a message the user understands, applied to a failed network request instead of a failed worker job
Checked 21 Aug 2026
Part of the JavaScript cookbook