From Parentheses to Perception: How Your Code Becomes Someone Else's Reality
summary
Maps HTML/CSS/JS into concrete browser structures: DOM and CSSOM merged into a render tree, layout converts relative sizes to exact pixels, painting makes bitmaps sent to the GPU, and JavaScript runs on the main thread so long tasks cause jank because frames must finish in 16.66 ms (60 fps). Details: HTML is 100% fault tolerant, V8 uses eager/lazy parsers → AST/scope → Ignition bytecode → Turbofan optimizer, and human vision matches that pipeline with rods/cones thresholds (≈15 Hz, ≈60 Hz) and cortical object recognition.
AI-written summary · about
chapters (25)
- 0:00Introduction
- 1:45Symmetry
- 3:11Parsing
- 4:20Analysis Syntax Analysis
- 4:53HTML vs CSS
- 6:46Parsers
- 8:03Baseline Compiler
- 8:31Optimizer Compiler
- 9:55LayoutReflow
- 10:16Painting
- 11:03JavaScript
- 11:57How Does Our Brain Take That
- 12:55Rods and cones
- 13:58Optic chiasm
- 14:37Lateral geniculate nucleus
- 15:38Primary visual cortex
- 17:09Agnosia
- 18:02Data
- 18:36Object Recognition
- 19:31Motion
- 20:55Words
- 22:58Parse
- 23:24Garden Path
- 24:21Constraint Based Theory
- 25:44Reading
related talks
27mAnatomy of a Browser
41mBrowser Internals for JS Devs
44mWe Are All Good with Browsers Made by Others
30mPulling Back the Curtains From Your Stylesheets
58mRendering performance from the ground up
20mHow browsers work?
39mLife of a pixel: A visual explanation of rendering performance
37mHappy Browser, Happy User!