Topic
HTML Parsing & Tokenization
From raw bytes to tokens to the DOM tree. Watch the tokenizer handle error recovery, foster parenting, and parse-insertion modes.
parsertokenizerspec
Start lesson Loading BrowserUniverse...
BrowserLab
Interactive walkthroughs of parsing, DOM construction, rendering pipelines, JS engine internals, the event loop, and more. Live visualizers, guided tours, and a sandbox to test ideas safely.
Browser pipeline
Sandbox ready
Live editors, mutation inspector, task queue visualizer, and GPU heatmaps all in one place.
Visualizers
Covering parsing, layout, paint, GPU, JS engine, GC, and DevTools.
Topic
From raw bytes to tokens to the DOM tree. Watch the tokenizer handle error recovery, foster parenting, and parse-insertion modes.
Topic
Tokenizer → parser → stylesheet tree → selector matching → cascade → computed styles → used values.
Topic
How the tree grows as tokens stream in. Includes insertion modes, foster parenting, and custom elements.
Topic
DOM + CSSOM → render tree → layout (block/inline/flow, flex/grid) → fragmentation and reflow.
Topic
Display lists, paint records, layerization, raster threads, tiles, and compositing to the final frame.
Topic
Compositor thread, raster threads, GPU memory, tiles, textures, and when GPU acceleration is (or is not) used.
Interactive Tour
A guided multi-step tour that animates each phase of the critical rendering path and JS engine execution. Watch tasks and microtasks interleave with rendering ticks.
HTML Parsing & Tokenization
Step through tokenizer output and watch the open-element stack change.
CSS Parsing & Style Calculation
Selector matching, specificity, and computed styles.
DOM Construction
Tree building, foster parenting, and mutation observation.
Render Tree & Layout
Formatting contexts, flow, and reflow counters.
Paint & Composite
Layer promotion and compositor output.
Sandbox
Monaco-powered editors feed a sandboxed iframe with CSP and postMessage instrumentation. Watch mutation observers and runtime errors surface instantly.
Mutation log
Live DOM tree + mutation observer feed.
Event inspector
rAF + tasks + microtasks timeline overlay.
Stack traces
Runtime errors bubbled with stack frames.
Sandboxed iframe
CSP default-src 'none'; optional allow-same-origin toggle.
Learning paths
Rendering Fundamentals
Parsing → DOM/CSSOM → Render tree → Layout → Paint/Composite.
JavaScript Engine & Event Loop
Ignition, TurboFan, inline caches, GC, tasks, microtasks, rAF.
Performance & Security
RAIL, profiling, GPU budgets, CSP, sandboxing, COOP/COEP.