How a browser runs your JavaScript, and what a Web Worker changes
Thread Island is a floating isometric island where every place is one part of how a browser runs a page. The main island is the main thread: the Event Loop plaza at its heart, the Call Stack Yard beside it, and the rendering pipeline around the edge (DOM Garden, CSS Foundry, Layout Workshop, Compositor Tower). The two Web Worker Mills stand on islands of their own. They share no ground with the page, and the only way to reach them is over a postMessage Bridge.
An animation is running on the page, and someone clicks a button that processes an image. The cart is that click. It makes the trip three times: once with the job on the main thread, once cut into small chunks, and once handed to a worker. The crates are the image's megabytes. The gauge on its flank is the longest main-thread task in the step it just paid for, measured against the 16.7 ms a frame allows. The plate above it is the time since the click and whether the main thread is free at that moment.
Genuinely computed, live, in your browser: the whole timeline. js/model.js
is a small discrete-event simulation of the HTML event loop. It runs one task at a time to
completion, drains microtasks after the handler, and gives the loop a rendering opportunity
after every task. A frame is painted only if a vsync has passed. Workers run on their own
timelines in parallel, and their replies queue as tasks that wait for the main thread to be
free. From that come the results: which frames are painted or dropped, how chunks interleave
with frames, the cost of structured clone versus transfer, worker start-up, the Promise.all
wait for two workers, the longest task, how long a second tap would wait, and when the
result reaches the screen. The waterfall bars are differences between the simulation's
milestones, so they add up to the total exactly.
Assumed (each marked ASSUMED in the source): a 60 Hz display; the
click landing 1 ms after a vsync; a 1.2 ms handler and 0.4 ms of microtasks; structured clone
at 2.4 ms per MB on each side and a transfer at 0.03 ms; 28 ms to start a worker; 6% overhead
for each half of a split job; 0.08 ms to queue each chunk; an idle frame costing 2.1 ms of
rAF, style, layout and paint; style, layout and paint for the result growing linearly with the
DOM nodes touched. Real devices vary by 5–10× on every one of these, so the
shape is right, not the exact milliseconds.
Simplified: no garbage-collection pauses, no idle callbacks, no task priorities, no throttling; a rendering opportunity at every vsync; the compositor modelled as a fixed cost after paint. In chunked mode the cart's three laps of the ring stand for all the slices (often 60 of them), and each lap is charged a third of the simulated time. The timeline on the panel shows every real slice.
Scenery: the island itself is the painting 2banR.jpg, shown as is,
with the generator's watermark in the corner covered by water. The roads the cart drives are
traced onto the painted paths. Trees, clouds, cubes, the docks, the boat, the painted envelopes
and crates on the bridges are all part of the picture and mean nothing. Drawn live on top of it
are the cart, the Call Stack Yard and the Yield Signal (added models with their own plates) and
the instruments, which are real readouts of the model at the cart's moment in time. The clock
hands on the painted tower faces move once per painted frame. It stops while frames are being dropped.
The crates in the Call Stack Yard show the depth
of the call stack. The yield signal turns red while a task holds the thread. The gears drawn
over each mill's painted gears turn, and its chimneys smoke, only while that worker is busy.
On the worker's island the cart makes four stops: the Inbox (the message waits while the
worker starts, 28 ms on the first trip, nothing later), the Unpacking Bench (deserialise),
the gears (the job) and the Packing Dock (serialise the reply). With 2 workers those stops
are timed on the worker whose reply arrives last, so the charges still add up exactly.
The loading bar and the crates there are readouts of that worker's timeline. The
no-DOM sign by the dock is a fact rather than a readout: a worker has no document.
The first time the cart reaches a place it stops long enough to read that place's write-up, between 9 and 26 seconds depending on how much there is to say. A bar under the panel text shows how much of the stop is left, and the timeline on the panel animates through the step during the stop. Once every place has been explained, the remaining trips run at a watchable pace. Space holds any stop indefinitely, S steps one station at a time, and the Speed slider scales everything, reading stops included. Reset (⟲) replays the slow tour, and Run keeps what you have already read.
Built from the isometric-explainer skill. The scenery is the concept art
2banR.jpg. All code and copy are original.