Browser internals catalog

From raw bytes to tokens to the DOM tree. Watch the tokenizer handle error recovery, foster parenting, and parse-insertion modes.

Tokenizer → parser → stylesheet tree → selector matching → cascade → computed styles → used values.

How the tree grows as tokens stream in. Includes insertion modes, foster parenting, and custom elements.

DOM + CSSOM → render tree → layout (block/inline/flow, flex/grid) → fragmentation and reflow.

Display lists, paint records, layerization, raster threads, tiles, and compositing to the final frame.

Compositor thread, raster threads, GPU memory, tiles, textures, and when GPU acceleration is (or is not) used.

Main thread + task queue + microtask queue + rendering ticks, rAF, setTimeout, promises, and task starvation.

Parser → AST → bytecode → interpreter → baseline JIT → optimizing JIT (TurboFan) → deopt → inline caches.

Roots, mark-and-sweep, generational GC, incremental & concurrent passes, write barriers, and fragmentation.

How Chrome DevTools collects performance & memory traces, how to read flamecharts and timelines.

Encapsulation, slots, custom elements, style scoping, and the composed tree vs. DOM tree.

How WebIDL shapes the DOM APIs, types, brand checks, and conversion rules between JS and the platform.

Origin model, SOP, CORP/CORS, CSP, iframes & sandbox flags, COOP/COEP, and process isolation.

RAIL goals, avoiding layout thrash, requestIdleCallback, preloading, and profiling paint/composite costs.