A sneak peek into super optimized code in JS frameworks
summary
Reverse-engineering Angular and React surfaces concrete optimizations: framework node objects share a single hidden class so property reads stay monomorphic, saving work when code hits 10,000 property accesses per change-detection cycle; V8 treats >4 shapes as megamorphic and monomorphic access can be up to 100x faster. React packs side-effects into bitmasks for tiny checks; Angular uses a 256-bit bloom filter per injector to short-circuit lookups — real, implemented tricks that measurably reduce allocations and runtime.
AI-written summary · about
chapters (10)
- 0:00Max Koretskyi aka The Wizard
- 3:40Angular sources comments
- 6:01Representing a template in Angular
- 7:36Representing a template in React
- 8:26Fiber and View nodes are used a lot when processing changes
- 20:47Polymorphic property access
- 24:13Template node types
- 28:05Effects in React Fiber architecture
- 33:22Encoding objects in bit fields
- 39:22Bloom filters
related talks
23mA sneak peek into super optimized code in JS frameworks
39mWhy are Angular and React so fast?
39mAlgorithms in the Front End: from V8 to VDOM
51mDeep dive into modern frameworks Reactivity🔬⚛️
33mJavaScript: The V8 Engine optimization tips (...)
28mAccelerating Angular
41mBrowser Internals for JS Devs
49mA comparison of the Reactivity Concepts in Angular, React, Vue and Svelte