The rule is wrong, or at least incomplete. 'Never block the main thread' is repeated in every performance guide, but moving work off the main thread has a cost: the Structured Clone Algorithm (SCA), the synchronous O(n) operation that serializes, copies, and deserializes data across browser contexts via postMessage(). For an 8MB image payload, that serialization blocks the main thread before the worker even starts. The background thread saves you nothing if the handoff costs more than the work itself.
Transferable objects like ArrayBuffer can sidestep SCA entirely, with Chrome benchmarks showing a 32MB transfer completing in under 7ms versus 300ms for cloning, a 43x difference. But transferables have hard limits: plain JS objects, Blobs, and Base64 strings are not transferable, and Chrome extension messaging via chrome.runtime.sendMessage forces everything through JSON serialization regardless. The author discovered this ceiling firsthand building Fastary, a Chrome screenshot extension, where using an Offscreen Document for canvas work still produced 2 to 3 seconds of latency.
The real question this piece forces is one most developers never ask: is this task expensive to process, or expensive to move? The 50ms long-task threshold and the 16.6ms frame budget are real constraints, but they apply to both the computation and the serialization overhead. Read the full article for the decision framework on when keeping work on the main thread is the faster, more honest choice.
[READ ORIGINAL →]