Performance
Core Web Vitals (LCP, INP, CLS), Bundle Optimization, Virtualization, and DevTools Performance Lab.
5 In-Depth TopicsCore Web Vitals: LCP, INP & CLS Optimization
Core Web Vitals are Google's three standardized user experience metrics measuring visual loading speed (LCP < 2.5s), interactive responsiveness (INP < 200ms), and visual stability (CLS < 0.1).
Bundle Optimization: Tree Shaking & Code Splitting
Bundle optimization minimizes JavaScript payload sizes through dead code elimination (Tree Shaking), dynamic route/component chunking (Code Splitting), and ES module analysis.
List Virtualization & Windowing Internals
List Virtualization (Windowing) renders only the small subset of DOM nodes currently visible in the scroll viewport (plus a tiny overscan buffer), recycling DOM elements as the user scrolls through datasets of 100,000+ items.
Performance Debugging Lab (DevTools, Profiler & Flame Charts)
Performance debugging is the structured methodology of measuring bottlenecks via Chrome DevTools (Performance, Memory, Network) and React Profiler before writing any optimization code.
Browser Rendering Internals: Reflow, Repaint & GPU Compositing
The browser rendering pipeline turns HTML/CSS into pixels through DOM/CSSOM creation, Layout (Reflow), Paint (rasterization), and Compositing (GPU layers). Optimizing animations requires targeting the Composite-only stage using `transform` and `opacity` to avoid blocking the main JavaScript thread.