FrontendInterviews.dev

Web Fundamentals for Frontend Interviews (Complete Guide for 2026)

This hub covers the fundamentals interviewers actually test: rendering strategies, browser internals, performance budgets, security (XSS/CSRF/CORS/CSP), state management, data fetching, accessibility, and React hooks. Use the sidebar to go deep — or start with the curated path below.

Start Here (High-Signal Topics)

Rendering Strategies (CSR vs SSR vs SSG vs ISR)
Pick the right rendering model, understand tradeoffs, and avoid common mistakes.
Hydration Patterns (Selective vs Progressive)
Know what hydrates, when, and how to prevent mismatch issues.
Critical Rendering Path
Understand what blocks first paint and how to optimize it.
Core Web Vitals (LCP, FID, CLS)
Measure + improve UX performance signals used in real products.
Event Loop Deep Dive
Microtasks vs macrotasks, Promises, async/await — interview-grade clarity.
Cross-Site Scripting (XSS)
Common attacks, safe rendering patterns, and CSP guidance.
Recommended order: Rendering → Browser Internals → Performance → Security → State/Data.

Pick Your Goal

Improve Performance

Performance Optimization GuideCode Splitting StrategiesResource Hints (Preload & Prefetch)Virtual Scrolling for Large ListsImage & Video Optimization

Get Security Right

Authentication & Authorization GuideCORS AttacksCSRFContent Security Policy (CSP)HTTPS and TLS

State, Caching & Data

State Management GuideReact Query & Server State CachingCaching StrategiesData Fetching PatternsReal-time Communication (WebSocket, SSE, Polling)

Browser Internals & JS Output

Critical Rendering PathScript Loading Patterns (async/defer)JavaScript Module SystemsHoisting (var, let, const)Promises & Event Loop (Output)

What Interviewers Commonly Ask

  • ✓ Compare CSR vs SSR vs SSG vs ISR. When would you choose each?
  • ✓ What is hydration? What causes hydration mismatch and how do you debug it?
  • ✓ Walk through the Critical Rendering Path. What blocks first paint?
  • ✓ Explain microtasks vs macrotasks. Why do Promise callbacks run “before” setTimeout?
  • ✓ Explain XSS vs CSRF vs CORS. What defenses do you add in a real app?
  • ✓ How do you reduce bundle size safely? (tree shaking, code splitting, lazy loading)
  • ✓ What are Core Web Vitals and how do you improve LCP/CLS in production?
  • ✓ How would you cache server state on the client and handle invalidation?

FAQ

Is this section only for beginners?
No — it’s structured for interview readiness. Start with Rendering + Browser Internals, then go deeper into Performance, Security, and State/Data depending on your level.
What should I study first for frontend interviews?
Rendering Strategies + Critical Rendering Path + Event Loop. These unlock most “why is my UI slow / broken / inconsistent?” interview questions.
Do I need to memorize everything?
No. Focus on tradeoffs + debugging. Interviewers want structured reasoning and the ability to explain choices under constraints.
Complete & Next
Critical Rendering Path