15 parts · 143 chapters
The Browser
A browser takes untrusted text from strangers, turns it into pixels and behaviour on your machine, and does so without letting the stranger touch anything else. Every frontend trick you know is a consequence of a mechanism in that pipeline, and this module is the pipeline, drawn stage by stage.
Processes and threads first, then the load path in order: network, parse, style, layout, paint, composite. Then the runtime, storage, security, navigation, input and media, measurement, and finally a small browser built in TypeScript and React so the specification becomes something you have run.
process modelWhy a tab is three processes, what each may do, and why that is the security model.
the pipelineURL to pixels in seven stages, which process and thread owns each, and what reruns on a change.
networkDNS, TCP, TLS, HTTP/1.1 to 3, the caches, the preload scanner and the hints.
parse and styleThe tokenizer state machine, tree construction, the CSSOM and selector matching done right to left.
layout and paintFormatting contexts, the layout algorithms, stacking, layers, the compositor and the 16.7 ms frame.
runtimeThe event loop as the browser actually runs it, workers, memory, and where long tasks come from.
platformStorage tiers, the origin model, CORS, CSP, navigation, bfcache, input, fonts and media.
build oneA tokenizer, DOM, CSS parser, cascade, box layout and painter in TypeScript, rendered side by side in React.
00
The Map
What a browser actually is · The multi-process model · Site isolation, and why a tab is not a process · Inside a renderer: the threads · A request's life at 10,000 feet · The critical rendering path, named · Where the time goes: two budgets · Three engines, and where they differ · How to read this course · The lab, and the habit
10 ch · ~55 min01The Network Stack
What a URL is, and what the browser does with it · DNS: resolving a name · TCP: the handshake and slow start · TLS 1.3: the handshake, certificates, and what you pay · HTTP/1.1, HTTP/2, HTTP/3 · Connection management: pools, limits and coalescing · The HTTP cache, properly · The memory cache, prefetch cache and the rest · The preload scanner and resource discovery · Compression, encoding and transfer size · CDNs and the edge · Reading a waterfall
12 ch · ~75 min02Parsing
From bytes to characters · The tokenizer: a state machine · Tree construction: the stack, the modes, the repairs · Scripts: how they stop the parser, and the four ways to load them · Speculative parsing and the preload scanner, revisited · The DOM, as a data structure · Shadow DOM and custom elements · CSS parsing and the CSSOM · Render-blocking CSS and how to not block · Streaming, early flush and progressive rendering · Parser timing in the Performance panel
11 ch · ~80 min03Style
What style resolution has to produce · Selector matching: right to left · The cascade, in full · Inheritance, initial values, and the four values · Custom properties and the cascade · Style invalidation: what a change recomputes · Pseudo-classes, pseudo-elements and generated content · Media queries, container queries and conditional CSS · Fonts and style: what font-display is really choosing · Reading style cost in the profile
10 ch · ~75 min04Layout
What layout computes, and the tree it runs on · The box model and formatting contexts · Block and inline layout, and line breaking · Flexbox: the algorithm · Grid: track sizing and placement · Positioning, containing blocks and stacking · Overflow, scrolling containers and fragmentation · Layout invalidation and incremental layout · Forced synchronous layout and thrash · Intrinsic sizing, aspect ratio and reserving space · Reading layout cost in the profile
11 ch · ~80 min05Paint and Composite
What paint is, and what it is not · Paint order and stacking contexts, drawn · Layers: what gets one, and what it costs · Raster, tiles and the GPU process · The compositor thread, scrolling and the frame · Animation: which properties cost what · Paint invalidation and what triggers a repaint · Images, decode and the paint pipeline · Text rendering: from glyphs to pixels · Reading paint and composite in the profile
10 ch · ~75 min06The Event Loop, As The Browser Runs It
The loop, as the HTML specification defines it · Tasks, microtasks and the ordering that follows · Rendering opportunities and requestAnimationFrame · Input: from hardware to handler · Long tasks, INP and yielding · The Prioritised Task Scheduling API · Timers, in detail · Observers: the loop-friendly way to react · Workers and the loop, briefly · Reading the loop in the profile
10 ch · ~70 min07JavaScript In The Page
Where your script runs: agents, realms and the global · Script execution: compile, run, and the code cache · Memory in the renderer: V8 heap, Oilpan, and what counts · Leaks: the catalogue, and finding them · WeakMap, WeakRef, FinalizationRegistry: holding without keeping · Dedicated, shared and service workers · Service workers in depth · Messaging: structured clone, transfer, and sharing · Worklets, WebAssembly and the other execution contexts · Reading memory and workers in DevTools
10 ch · ~70 min08Storage
The storage map: what exists and why there are so many · Cookies: a transport mechanism that happens to persist · localStorage and sessionStorage: small, synchronous, and misused · IndexedDB: the client database · Cache API and the offline contract · OPFS and the File System Access API · Quota, persistence, eviction and partitioning · Choosing a storage layer: a decision procedure · Reading storage in DevTools
9 ch · ~60 min09The Security Model
Origin and site: the two boundaries · CORS: who may read what · Content Security Policy: the XSS backstop · XSS, CSRF, clickjacking: the attacks the headers are for · Site isolation and the isolation headers · Sandboxing: iframes, permissions, and the Permissions Policy · HTTPS, mixed content, HSTS, and the certificate chain · Reading security in DevTools
8 ch · ~65 min10Navigation And Lifecycle
What a navigation is: the browser process drives it · Page lifecycle states, and which events you can trust · The back/forward cache · Client-side routing: what the History API gives you and what it takes away · Prefetch, prerender and Speculation Rules · Iframes: a document inside a document · Downloads, popups, and the things that are not navigations · Reading navigation in DevTools
8 ch · ~55 min11Input, Text, Images, Media
The input pipeline, revisited at the event level · Focus, keyboard, and the accessibility tree · Forms: the browser's own state machine · Text: from codepoints to glyphs · Images: selection, loading, decoding, and the LCP image · Canvas, SVG and WebGL/WebGPU: the three drawing surfaces · Audio and video: the media pipeline · Reading input, text and media in DevTools
8 ch · ~65 min12Performance, Measured
What to measure: the metrics and what each one stands for · LCP in four phases · INP in three phases · CLS: finding the shift · Field versus lab, and the Performance APIs underneath · Reading a Performance trace · Budgets, regressions, and keeping a win · An investigation, end to end
8 ch · ~60 min13The DevTools Map
The map: which panel watches which subsystem · How DevTools works: the protocol · The debugger: seven kinds of breakpoint · The Console beyond log · The panels most people have not opened · chrome:// pages: the engine's own instruments · A triage procedure: symptom to panel
7 ch · ~45 min14Build Your Own Browser
What we are building, and what we are leaving out · tokenizer.ts: characters in, tokens out · treebuilder.ts: the stack of open elements · dom.ts and css.ts: the two trees the cascade joins · cascade.ts: matching, sorting, inheriting, computing · layout.ts, part one: boxes and blocks · layout.ts, part two: lines · paint.ts: a display list, then pixels · eventloop.ts: tasks, microtasks, frames, and a sandbox · pipeline.ts and App.tsx: the glue, and the shell · Exercises: the next thing to add, in order of payoff
11 ch · ~75 minPaired with the DevTools courseChapters that say "go to the lab" point at the companion app in the DevTools module, where each pathology is a route you can trigger and watch in the panel that shows it. The mechanism is here; the proof is there.