A live, animated tour of how the browser and the JavaScript engine work, built with plain JavaScript and CSS (no framework, no build step, no runtime dependencies). It is Capstone II of the JavaScript field guide (§79–§84).
Nine stations, each with missions that tick themselves off:
| Station | What's live | |
|---|---|---|
| 00 | The big picture | process/thread map, an animated "life of a click", your browser's capabilities |
| 01 | URL to bytes | Navigation Timing, an HTTP/1.1 vs HTTP/2 request burst, TLS 1.3 vs 1.2, ALPN/cipher, SSE |
| 02 | Rendering | pipeline stages per CSS property, layout thrashing measured, DOM vs render tree |
| 03 | Event loop | step-through simulator, prediction quiz, verified against the real engine |
| 04 | Inside V8 | tier-up/deopt, real bytecode, hidden classes, inline caches, megamorphic benchmark |
| 05 | Threads | visible jank, Web Worker fix, copy vs transfer, SharedArrayBuffer race vs Atomics |
| 06 | Storage | IndexedDB events as they fire, the auto-commit pitfall, sync vs async storage |
| 07 | Core Web Vitals | live LCP/INP/CLS gauges, break and fix CLS and INP, Long Animation Frames |
| 08 | Debugging | captured errors/rejections/CSP violations, a findable leak, User Timing, DevTools recipes |