Web Fundamentals for Frontend InterviewsComplete Guide
Master the frontend fundamentals interviewers actually test: browser rendering, JavaScript runtime behavior, modern rendering strategies, architecture, performance, and security. Use this hub as your roadmap for structured interview prep.
Start with requirements before jumping to components
Use this page as a practical roadmap: build your core mental model first, then deepen with architecture, performance, and security topics.
Structured learning path
Learn web fundamentals in the order that makes interviews easier. Follow a path that mirrors how strong frontend engineers explain systems in interviews.
Why is the screen still blank? Master the critical rendering path, find render-blocking culprits, and get pixels on the screen faster.
Stop guessing why setTimeout runs later. Master the Event Loop, microtasks, macrotasks, and main-thread scheduling.
Navigate the modern tradeoff matrix: CSR, SSR, SSG, ISR, Streaming, and React Server Components (RSCs).
Move beyond definitions. Master INP, LCP, CLS, resource loading, and main-thread offloading (Web Workers).
Lock down your app. Understand XSS, CSRF, CSP, and secure data fetching patterns.
How frontend performance unfolds in the browser
Many frontend interview questions are really testing whether you understand where time is spent between navigation and interactivity.
01 · The Network Phase
Is the server awake and reachable?
02 · The Browser Phase
Are we drawing the first pixels?
03 · The Content Phase
Did the primary content render?
04 · The Interactivity Phase
Can the user interact without UI freezing?
How frontend performance actually unfolds in the browser
Many frontend interview questions are really asking whether you understand where time is spent between navigation and interactivity.
01
Navigation Start
02
DNS / TCP / TLS
03
TTFB
04
HTML Parsing
05
FCP
06
LCP
07
Hydration
Production-Ready Standards
You know the fundamentals. Here is how you write code that scales and stays reliable in production.
| Axis | What is Tested | Strong Signal |
|---|---|---|
| Accessibility (A11y) | Walk through the Critical Rendering Path. What blocks first paint? | Semantic HTML & ARIA Attributes, Keyboard Navigation & Focus Management |
| Testing | Why do Promise callbacks run before setTimeout, and how do microtasks work? | Unit vs Integration vs E2E, Mocking APIs & Timers |
| Observability & Deployment | Compare CSR vs SSR vs SSG vs ISR. When would you choose each? | RUM & Performance Signals, Error Boundaries, CI/CD Pipelines |
Difficulty Progression — Start Here
Start with focused interaction topics, then move to data-heavy systems, and finally collaboration-heavy architectures.
Interaction Systems
Autocomplete, image carousel, and chat input. Focus on request lifecycle, local state, and responsiveness.
Data-heavy Apps
News feed, search, and dashboards. Focus on caching, normalization, pagination, and rendering performance.
Complex Interactive Systems
Collaborative and workflow-heavy apps. Focus on concurrency, consistency, and resilience.
Most Asked Topics
These are the concepts that come up again and again in frontend interviews.
Start Here
Critical Rendering Path
What blocks rendering and first paint.
Explore topic
Most Asked
Event Loop Deep Dive
Microtasks, macrotasks, promises, runtime behavior.
Explore topic
High Signal
Rendering Strategies (CSR to RSCs)
When to choose each rendering mode.
Explore topic
Performance
Core Web Vitals
LCP, INP, CLS and practical optimization.
Explore topic
Security
Cross-Site Scripting (XSS)
Understand how XSS happens, how to prevent it, and how CSP and safer rendering patterns fit into real apps.
Explore topic
Architecture
State Management Guide
Learn how to reason about client state, server state, caching, invalidation, and scalable frontend architecture.
Explore topic
Browse by Interview Goal
Use the homepage to surface the highest-signal areas first, then explore deeper topic clusters from the sidebar.
Rendering & Browser Architecture
Start with the browser mental model, rendering strategies, hydration, and runtime behavior.
- Critical Rendering Path
- Script Loading Patterns (async/defer)
- Event Loop Deep Dive
- JavaScript Module Systems (CJS, ESM, UMD)
- Dynamic Module Loading (import())
- Import on Interaction
- Import on Visibility
- Browser Rendering Pipeline & Layout Thrashing
- Rendering Strategies (CSR, SSR, SSG, ISR)
- Streaming SSR & Progressive HTML
- Islands Architecture
- React Server Components
- Framework Reactivity (React, Vue, Svelte, Solid)
- HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC)
- DNS Resolution & TTL Caching
Performance
Cover loading order, Core Web Vitals, bundle strategy, caching, and real-world optimization.
- Core Web Vitals: LCP, INP, CLS
- Performance Optimization Trade-offs
- Critical Resource Prioritization
- Code Splitting & Dynamic Imports
- Tree Shaking & Dead Code Elimination
- Lazy Loading
- Resource Hints: Preload, Prefetch & Preconnect
- Text Compression: Gzip & Brotli
- Image & Video Optimization
- Adaptive Loading
- List Virtualization
- Web Workers vs Main Thread
- Memory Leaks: Detection & Prevention
- Managing Third-Party Scripts
- How CDNs Work
- HTTP Caching Deep Dive
- Service Workers & Offline Strategy
- PWA Fundamentals
Security
Learn the frontend security topics strong candidates explain clearly in interviews.
State & Data Architecture
Understand state management, server state, caching, storage, and backend interaction patterns.
What Interviewers Commonly Ask
Practice these high-frequency questions to build interview-ready explanations.
💬 Walk through the Critical Rendering Path. What blocks first paint?
Read the explanation
💬 Why do Promise callbacks run before setTimeout, and how do microtasks work?
Read the explanation
💬 Compare CSR vs SSR vs SSG vs ISR. When would you choose each?
Read the explanation
💬 What is hydration, and what causes hydration mismatch?
Read the explanation
💬 Explain XSS vs CSRF vs CORS. What defenses would you add in production?
Read the explanation
💬 How do you choose between Context, Zustand, Redux, and server-state tools?
Read the explanation
Explore More Topics
These sections are valuable, but better as secondary discovery on the hub instead of the main homepage focus.
Application Architecture
Patterns for resilient, observable, scalable frontend systems.
Accessibility
A11y topics that matter in production and in strong interview answers.
Styling & Design
Scalable styling, design systems, and internationalized UI concerns.
Build & Deployment
Useful for completeness, but better lower on the page than above the core concepts.
JavaScript Output & React Hooks
Good engagement sections that users can discover after the core interview fundamentals.