API ArcadeISSUE #13 of 23

web workers · postMessage · transferable

ApiaVSLegacy Larry

Apia saysWeb Workers run JavaScript on a background thread, communicating via postMessage.

A new Worker("worker.js") runs heavy computation off the main thread so the UI never freezes. Talk via postMessage / onmessage; workers can't touch the DOM. For zero-copy large data, use transferable objects (ArrayBuffers). Ideal for parsing, image processing, and crunching big datasets.

Power-ups you unlock

new Worker(file) runs off the main thread
postMessage/onmessage to communicate
No DOM access inside a worker
Transferables move big buffers without copying

Legacy Larry attacks — common mistakes

Touching the DOM from a worker
Copying huge data each message (use transfer)
Spawning workers for trivial work

Boss battleSketch offloading a heavy sum to a worker and posting the result back.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><button id="b">heavy sum</button><pre id="o"></pre>
<script>const code='onmessage=()=>{let s=0;for(let i=0;i<1e8;i++)s+=i;postMessage(s)}';const w=new Worker(URL.createObjectURL(new Blob([code])));w.onmessage=e=>document.getElementById('o').textContent='sum='+e.data;document.getElementById('b').onclick=()=>w.postMessage(0);</script></body></html>

▶ Open the interactive comic issue

‹ Cache Api · Putting Responses In Cache Shared Workers · Cross-Tab Compute ›