Anatomy of a Browser
summary
Browsers convert HTML into pixels by running tokenization and parsing once per document (the tokenizer is a finite state machine) to build the DOM and CSSOM, then running layout paint composite each frame (~60 times a second) to produce bitmaps. Engines named: Gecko, WebKit, Blink (Edge moves to Blink); iOS forces WebKit. CSS rules carry specificity and source to resolve conflicts. Examples: fixed headers become separate layers (Ravelry header), painting is bottom-up, and the final composite stitches bitmaps together for display.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 0:25Welcome
- 1:30Browsers
- 7:22Tokenization
- 11:32HTML pausing
- 15:34CSS
- 20:13Layout
- 22:43Painting
- 24:50Composite
related talks
20mHow browsers work?
44mWe Are All Good with Browsers Made by Others
37mHappy Browser, Happy User!
27mFrom Parentheses to Perception: How Your Code Becomes Someone Else's Reality
39mFrom code to pixels in a Blink
30mPulling Back the Curtains From Your Stylesheets
55mHow the Browser Works
22mDOM implementation techniques