Browser Fundamentals

The browser is a runtime, not a document viewer: networking, parsers, a JavaScript engine, a layout engine, a paint system, a compositor, storage and a security sandbox, split across processes that fail independently.

The Browser Is a Runtime
▶ lab

Not a document viewer with scripting bolted on: a sandboxed application platform with a scheduler, a memory model, a renderer and a security boundary.

Q · What is actually executing my application, and what services does it provide?
What Happens When You Open a Website
▶ lab

URL to pixels: resolution, connection, request, streaming HTML, DOM and CSSOM, style, layout, paint, composite — and what blocks what.

Q · Between pressing Enter and seeing content, what exactly happens, and which step is the one holding me up?
The Multi-Process Browser

Browser, renderer, network, GPU and utility processes — why a page can hang without taking the browser with it, and what that means for your code.

Q · When my page freezes, what exactly is frozen, and what is still running?
The Frontend Reasoning Loop
▶ lab

Intent, event, state, logic, DOM, network, layout, paint, pixels, feedback — the chain every lesson in this domain is a zoom into.

Q · What is the general shape of every interaction, so I can ask the same questions of any feature?
Origins and the Sandbox

Scheme, host and port together form the unit of trust — and nearly every confusing browser restriction is that boundary being enforced.

Q · Why can my page not simply read that other page, that other API, or that file?
What the Frontend Is Responsible For

The boundary that keeps this domain honest: the browser-executed application and the interaction a person feels — and where everything else properly lives.

Q · Which of these problems is mine, which belongs to a neighbour, and which is shared?