Frontend · Interview · Performance Optimization

The Frontend Performance Playbook: From Core Web Vitals to Memory Leaks

By 你是菠萝我是面包 · Aug 19, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

INP replaced FID as a Core Web Vital in 2024, so any team optimizing for search ranking or user experience must now measure and improve full-lifecycle interaction latency, not just first input. The techniques here form the baseline for passing a modern frontend performance interview and for shipping a site that stays fast under real user conditions.

Summary

Performance optimization spans the entire stack, from network requests down to rendering and runtime behavior. Core Web Vitals—LCP, INP, and CLS—now anchor Google's quality signals, with INP replacing FID in 2024 to capture full-lifecycle interaction latency. Measuring these correctly requires the Performance API, PerformanceObserver, or the web-vitals library, and the data feeds into a monitoring pipeline that tracks regressions over time.

Loading performance hinges on shrinking the critical rendering path. Code splitting, route-based lazy loading, preload/prefetch hints, and inlining critical CSS all reduce the time to first paint. On the resource side, modern image formats (AVIF, WebP), responsive srcset, native lazy loading, and font subsetting cut payload weight. HTTP caching layers—strong cache for hashed assets, negotiated cache for HTML, and Service Worker strategies like Cache First or Stale While Revalidate—keep repeat visits fast.

Rendering and runtime optimizations prevent jank. Batching DOM writes, sticking to compositor-only properties (transform, opacity), virtualizing long lists, and offloading heavy work to Web Workers keep the main thread responsive. Framework-specific techniques—React.memo, useMemo, useCallback, state colocation, and Vue's v-memo, shallowRef, and KeepAlive—prevent wasted re-renders. Memory leaks from uncleaned timers, event listeners, and detached DOM references are caught with Chrome's heap snapshots and allocation timelines.

Takeaways

— INP replaced FID in 2024 as a Core Web Vital, measuring the worst interaction latency across the full page lifecycle rather than just the first input.

— Cache-Control: immutable paired with content-hashed filenames lets static assets be cached for a year without revalidation.

— Brotli compression typically produces files 15–25% smaller than Gzip for text-based resources.

— Virtual lists render only visible rows, keeping DOM node counts low even with hundreds of thousands of items.

— CSS animations using only transform and opacity run on the compositor thread and avoid layout or paint work.

— React 19's compiler automates memoization, but manual useMemo, useCallback, and state colocation remain critical for large apps today.

— Service Worker caching strategies—Cache First, Network First, Stale While Revalidate—each suit different resource types and freshness requirements.

— Memory leaks from uncleaned intervals, event listeners, and detached DOM references are detectable by comparing heap snapshots in Chrome DevTools.

Conclusions

INP's adoption signals that Google now penalizes sluggish interactions anywhere on the page, not just the first click, which raises the bar for SPA responsiveness.

immutable in Cache-Control is underused; it prevents wasted revalidation requests when a hashed URL guarantees content stability.

The shift from FID to INP makes long tasks and main-thread congestion more dangerous than before, since a single slow interaction can ruin the metric.

Framework-level optimizations like React.memo and v-memo are stopgaps—the real fix is colocating state so that changes don't propagate to unrelated subtrees.

103 Early Hints are replacing HTTP/2 Server Push because they let the browser decide what to preload, avoiding over-pushing and cache waste.

Concepts & terms

INP (Interaction to Next Paint)

A Core Web Vital that measures the latency of all user interactions (clicks, taps, key presses) throughout a page's lifetime, replacing FID in 2024. A good score is ≤ 200ms.

CLS (Cumulative Layout Shift)

A Core Web Vital that quantifies visual stability by summing unexpected layout shifts during a page's lifecycle. A good score is ≤ 0.1.

Cache-Control: immutable

An HTTP header directive that tells the browser a resource will never change, preventing revalidation requests even on a hard reload. Used with content-hashed filenames.

Virtual List

A rendering technique that only mounts DOM nodes for items currently visible in the viewport, drastically reducing memory and layout cost for long lists.

103 Early Hints

An HTTP status code that lets a server send Link headers to the browser before the full response is ready, enabling early preload of critical sub-resources.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗