GUIDE · FRONTEND CONCEPTS
15 Frontend Concepts Every Senior Developer Has Mastered
Everybody tells you to get to senior. Nobody tells you how.
We analyzed over 300 senior frontend engineers — different backgrounds, different frameworks. One pattern: every single one has mastered these 15 mental models. Most developers can't explain five.
THE CONCEPTS
The mental models, one by one
- 01
The Critical Rendering Path
The steps the browser takes to turn HTML, CSS and JavaScript into pixels: parse the markup, download the blocking resources, build the DOM and CSSOM, then style → layout → paint → composite.
The first pixel milestone is the First Contentful Paint. Almost every performance concept on this page traces back to this one model.
Senior tip: never open with framework talk. Explain the browser mechanics; use React as the example, not the answer.
DOM / CSSOMRender-blocking resourcesFirst Contentful Paint - 02
Core Web Vitals
Empirical metrics for how fast a page loads and responds: Largest Contentful Paint and Cumulative Layout Shift measure the initial render; Interaction to Next Paint measures re-render speed after input.
Think Formula 1 benchmarks: you don't say your app is fast, you measure it against the industry and know which number is bad.
LCPINPCLSPerformance budgets - 03
HTTP Caching
Caching is memoization at the file level: reuse the output for the same input, for a predefined time — the TTL.
The browser stores assets per the Cache-Control policy. When the TTL expires, the ETag header decides whether the cached copy is still fresh or a new download happens. Open DevTools on any big site and read the headers — it's all there.
Cache-ControlETagTTLMemoization - 04
CDNs & Content Negotiation
A CDN replicates your static assets to edge locations near the user — the single best first performance move for most apps. It also sets sane caching and compression out of the box.
Content negotiation is the client saying "I accept gzip or brotli" in headers, and the server sending the compressed version. Decompressing is cheaper than downloading — that's the whole math.
Edge locationsgzip / brotliAccept headers - 05
Lazy Loading & Dynamic Imports
Eager loading loads everything up front. Lazy loading loads assets when they're needed — images as the user scrolls, JavaScript when the user acts.
For JavaScript that means dynamic imports: instead of a static import bundled at build time, you fetch and execute a chunk at runtime, right when the modal actually opens.
Dynamic import()Code on demandIntersection-based media - 06
Bundle Splitting
One production bundle means every page pays for all the JavaScript of every other page.
Split it: vendor code in one chunk, then one chunk per route — login, home, dashboard. Users only parse what the page needs. With a bundler and a router this is one of the cheapest wins available.
Senior tip: think in systems and relationships, not memorized facts. Bundle splitting is the critical rendering path applied to your build output.
Webpack / ViteRoute-based chunksvendor.js - 07
Critical CSS
CSS is render-blocking by design — the browser wants every rule before it paints the first element.
Critical CSS extracts just the rules for the above-the-fold view and inlines them in the HTML; the rest loads without blocking. Bundler plugins pre-render your page headlessly to compute which selectors matter.
Simple idea, sophisticated tooling. This is how large e-commerce sites keep first paint fast with megabytes of CSS.
Above the foldRender-blocking CSSInlining - 08
Essential State
The minimum data needed to render a UI. A senior looks at a checkout screen the way an automotive engineer looks at a car — X-ray vision for the state and components underneath.
Subtotals, discounted prices, totals: all derivable. Keep product data, a discount rate, a shipping cost — compute the rest. Less state means fewer re-renders, fewer bugs, simpler tests.
Minimal stateDerived valuesDeterministic UI - 09
The Reducer Pattern
When one action updates six components, updating state piece by piece means lifted state, prop drilling and chaos.
A reducer is a pure function: old state + action → new state. One deterministic, testable, side-effect-free calculation; components subscribe to the result.
Mid-level devs talk about Redux and Zustand. Seniors talk about the pattern — libraries change, the mental model doesn't.
Pure functionsImmutabilityPredictable state transitions - 10
Windowing / List Virtualization
Feeds die by a thousand DOM nodes: memory and CPU pressure make everything slow even when the user does nothing. INP suffers first.
Windowing mounts only what's in the viewport (plus a small buffer) and unmounts the rest as the user scrolls, using the IntersectionObserver API. Any "build a news feed" system design answer needs this.
IntersectionObserverreact-virtualizedINP - 11
Server-Side Rendering
A client-rendered app ships an empty div and a promise. Slow devices and networks stare at the white screen of death.
SSR runs the framework on the server: fetch the data, pre-render the HTML, send something real. The user sees the page immediately — interactivity comes next.
Pre-rendered HTMLFirst Meaningful PaintSEO - 12
Rehydration
The pre-rendered page is static until the client bundle downloads, builds the component tree and attaches it to the existing markup. That's hydration.
Until it finishes, clicks do nothing — rage clicking territory. And when server and client markup disagree, you get hydration errors. Know why they happen.
hydrate()Hydration errorsTime to Interactive - 13
Partial Pre-Rendering
Mix rendering strategies on a single page: static-render everything you can, client-render only the dynamic islands.
The framework decides which parts ship as fast static HTML and which hydrate. Maximum performance for pages like e-commerce — at the price of real complexity. Only reach for it when speed is a product requirement.
Static + dynamic islandsNext.js PPR - 14
Server Components
Ship zero JavaScript for components that never change. The framework renders them on the server and sends only markup; client components get extracted and hydrated.
SSR makes the first paint fast; server components make hydration fast. Together they're why modern frameworks default to rendering on the server.
Zero-JS componentsRSCSmaller bundles - 15
Micro-Frontends
Break the UI into independent applications — search bar, deals, product grid — composed by a shell that owns theming, auth and global state.
Each team is a small company: own product manager, own deploys, own BFF. That's how Walmart-scale frontends ship daily. And it's overkill for almost everyone smaller.
Shell + remotesIndependent deploysTeam scaling
Free Senior Training.
One session, the whole system: the fundamentals, the interview strategy, and the plan to the offer. Watch it free.
MORE GUIDES
