Crux Read four browser snippets — microtask ordering, layout thrash, a hydration mismatch, and a blocking handler — and pick the behaviour or the highest-leverage fix.
Your altitude — climbing toward senior
ZeroJuniorMiddleSenior
You are at senior altitude — in orbit
◷ 14 min
The trace tells you where the time went; the code tells you why. Read each snippet the way you would in a review for a slow page, then pick the behaviour or the fix a senior engineer reaches for first.
Goal
Practise mapping code back to the layer it stresses: the event loop’s queue ordering, the render pipeline’s layout/paint coupling, hydration determinism, and the INP budget on the main thread.
Heads-up Only A and E are synchronous. setTimeout and the promise schedule callbacks for later; they cannot run before E, which is still in the current synchronous run.
Heads-up A 0 ms timer is still a macrotask. The microtask queue (C, D) always drains completely before the event loop picks up the next macrotask (B).
Heads-up Both C and D are microtasks in the same queue; they run in the order they were enqueued. The promise .then (C) was queued before queueMicrotask (D).
Snippet 2 — the resize loop
function fitAll(boxes) { for (const box of boxes) { const w = box.offsetWidth; // READ — forces layout box.style.width = w + 10 + "px"; // WRITE — invalidates layout }}
Quiz
Completed
With 500 boxes this handler is a long task that wrecks INP. What is the defect and the fix?
Heads-up getBoundingClientRect also forces layout — swapping the API does not help. The defect is interleaving reads and writes, which forces a reflow per iteration regardless of which read API is used.
Heads-up There is little allocation here; the cost is repeated forced layout, not garbage collection. The trace shows recalculate-style/layout bars, not GC.
Heads-up A class would still invalidate layout and, read back in the same loop, still thrash. The fix is separating the read phase from the write phase, not the styling mechanism.
Snippet 3 — the server/client render
function Price({ cents }) { // runs on both server and client during hydration const formatted = new Intl.NumberFormat(navigator.language, { style: "currency", currency: "USD", }).format(cents / 100); return <span id="price">{formatted}</span>;}
Quiz
Completed
This component intermittently flashes the price and spikes CLS on hydration. What is the cross-layer bug?
Heads-up Intl is fast enough here; the failure is non-determinism, not cost. The server and client produce different strings, which is what triggers the mismatch re-render and the shift.
Heads-up A duplicate id is invalid but is not what flashes the value. The flash is React reconciling a server/client text mismatch — a determinism bug, not an id bug.
Heads-up Float division is not the cause of an intermittent flash on hydration. The intermittency tracks the locale differing between server and client — a render-determinism problem.
Snippet 4 — the click handler
button.addEventListener("click", () => { cart.add(item); renderCartBadge(); // small DOM update const report = JSON.parse(hugeBlob); // ~120 ms on a mid-range phone analytics.sendSync(report); // synchronous beacon});
Quiz
Completed
The badge updates but INP for this click is ~180 ms even on an idle thread. What is the fix that respects the INP budget?
Heads-up rAF schedules a callback before the next paint, so the heavy work would still run before that paint and still count toward INP. You must yield after the visual update, not just defer everything by one frame.
Heads-up Reordering does not remove the ~120 ms parse and the sync beacon from before the paint. The badge would update later, not sooner — INP would be the same or worse.
Heads-up 180 ms is within budget but driven entirely by avoidable synchronous work before paint. Yielding after the UI update and offloading the parse cuts it to near the badge-update cost.
Recap
Four snippets, four layers. The event loop drains all microtasks (promise, queueMicrotask) before the next macrotask (setTimeout), so synchronous-then-microtasks-then-macrotask is the order. Interleaving DOM reads and writes forces a reflow per iteration — batch reads then writes. A component that renders a locale- or browser-only value on the server is a hydration mismatch — make the server render deterministic and defer client-only formatting to useEffect. And any synchronous heavy work in a handler before the paint counts against INP — update the UI minimally, then yield. The skill is reading code straight back to the track it stresses.