DOM implementation techniques

on YouTube ↗22m

" summary

Browsers build a layout/render tree that maps DOM nodes to rectangles, then top‑down layout assigns sizes (tables may need multiple passes), and lazy reflow marks dirty nodes so scripts avoid repeated work. Style matching uses buckets (ID/class/tag/others) to avoid millions of rule checks — Twitter would need ~10 million naive matches. Reading layout properties forces an immediate layout — the CodeMirror case rewrites a loop to compute nodes then add => 3 ms and avoids freezes. GPUs handle layers and 3D transforms for faster drawing; reflow-on-read forces layout.

AI-written summary · about

" chapters (11)

1. 0:00Intro
2. 1:00The browser
3. 2:10Render tree
4. 3:15Layout tree
5. 3:45Layout in
6. 5:20Layouts
7. 6:20Styling
8. 7:15Reflow
9. 11:55Drawing
10. 14:50Style matching
11. 16:15Buckets

" related talks

• 20mHow browsers work?Kruno · JSUnconf 2017
• 30mPulling Back the Curtains From Your StylesheetsAimee Knight · NG-BE 2017
• 27mAnatomy of a BrowserErin Zimmer · PyCon AU 2019
• 49mPanel 4: Responsive LayoutRazvan Caliman, George Crawford, Andy Hume, Amber Weinberg · Edge Conference 2013
• 32mThe Web's Black MagicJing Jin, Matthew Delaney · JSConf EU 2012
• 27mFrom Parentheses to Perception: How Your Code Becomes Someone Else's RealityJenna Zeigen · Node+JS Interactive 2018
• 27mChanging The Layout GameChris Wright · Front-Trends 2017
• 30mBrowser Graphics Under the HoodNoam Rosenthal · You Gotta Love Frontend 2016