Happy Browser, Happy User!
summary
Walks through how browsers actually fetch and build pages: DNS, TCP three‑way and SSL handshakes, then HTTP GET (so first 14 kilobyte rule matters). Explains parsing into DOM and CSSOM, the preload scanner, how blocking scripts stall parsing and how async/defer or inlining critical CSS speeds time to first meaningful paint. Covers render pipeline (style, layout, paint, composite), GPU compositing for ~2.7 million pixels, and concrete fixes: set image dimensions, use layers (opacity/transforms/visibility) to avoid reflow, CDN/cache, and reduce server time.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 1:06Performance and UX
- 2:49Why browsers matter
- 3:55How browsers work
- 8:31Parsing the DOM
- 17:17Optimizing parsing
- 21:11Rendering pipeline
- 27:44First meaningful paint
- 30:28Handling reflows
- 31:10User interactions
- 35:46Summary and recap
related talks
44mWe Are All Good with Browsers Made by Others
39mFrom code to pixels in a Blink
27mAnatomy of a Browser
30mPulling Back the Curtains From Your Stylesheets
40mA Quest to Be a (Web)master: How do You Go from Simple Code to Building Great Web Experience?
50mThe Browser is a Marvelous Thing
28mThe Browser Hackers Guide To Instantly Loading Everything
55mHow the Browser Works