A sneak peek into super optimized code in JS frameworks
summary
Reverse-engineering of Angular and React shows concrete micro-optimizations: enforced monomorphic property access via shared hidden classes yields up to ~100x faster property reads in hot paths, frameworks collapse node types into single structs and use tag fields, React encodes side effects as bitfields to avoid object allocation, and Angular uses bloom filters per injector to make DI lookups mostly one CPU instruction. Code snippets, debugger traces and measured counts back each claim.
AI-written summary · about
chapters (22)
- 0:00Introduction
- 1:13Overview
- 1:48Monomorphic
- 2:34Data Structures
- 3:08View Notes
- 4:16Update Node
- 5:17Virtual Machines
- 5:52Hidden classes
- 6:18Shape object
- 7:14Transition chains
- 9:18Cache
- 12:30JS Templates
- 12:52React Framework
- 13:14Bit fields
- 13:45Side effects
- 14:24Update task
- 15:24Update host
- 15:52Bitfills
- 16:58Bloom Filters
- 17:43Probability
- 19:24Collisions
- 22:11Articles
related talks
55mA sneak peek into super optimized code in JS frameworks
30mThe secrets behind Angular’s lightning speed
39mAlgorithms in the Front End: from V8 to VDOM
37mThe Secrets Behind Angular’s Lightning Speed
41mBrowser Internals for JS Devs
25mJavaScript engines how do they even?
28mAccelerating Angular
11mRevolutionizing JavaScript Performance