Web Fundamentals

HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC) for Frontend Performance

Web Fundamentals Map

Rendering & Browser Architecture

Critical Rendering PathScript Loading Patterns (async/defer)Event Loop Deep DiveJavaScript Module Systems (CJS, ESM, UMD)Dynamic Module Loading (import())Import on InteractionImport on VisibilityBrowser Rendering Pipeline & Layout ThrashingRendering Strategies (CSR, SSR, SSG, ISR)Streaming SSR & Progressive HTMLIslands ArchitectureReact Server ComponentsFramework Reactivity (React, Vue, Svelte, Solid)HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC)DNS Resolution & TTL Caching

Performance

Core Web Vitals: LCP, INP, CLSPerformance Optimization Trade-offsCritical Resource PrioritizationCode Splitting & Dynamic ImportsTree Shaking & Dead Code EliminationLazy LoadingResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip & BrotliImage & Video OptimizationAdaptive LoadingList VirtualizationWeb Workers vs Main ThreadMemory Leaks: Detection & PreventionManaging Third-Party ScriptsHow CDNs WorkHTTP Caching Deep DiveService Workers & Offline StrategyPWA Fundamentals

Security

Cross-Site Scripting (XSS)Cross-Site Request Forgery (CSRF)CORS ExplainedCORS Preflight, Credentials & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? (TLS/SSL)Authorization Best PracticesCookie Security & Session Hardening

State & Data Architecture

State Management Guide (Context vs Zustand vs Redux)React Query & Server State CachingData Fetching PatternsCaching StrategiesPagination: Offset vs Cursor-BasedReal-time Communication (WebSocket, SSE, Polling)
mediumWeb Fundamentals

HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC) for Frontend Performance

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

TL;DRHTTP/1.1: multiple connections • HTTP/2: multiplexing over TCP • HTTP/3: QUIC (UDP) removes HoL blocking
High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

HTTP evolution addresses network inefficiencies that affect frontend performance. HTTP/1.1 relies on multiple TCP connections. HTTP/2 introduces multiplexing over a single connection. HTTP/3 replaces TCP with QUIC (UDP-based), eliminating head-of-line blocking, improving loss recovery, and enabling seamless connection migration — especially valuable on mobile networks.

HTTP/1.1 = many small trucks, each making separate trips (high overhead). HTTP/2 = one big truck carrying everything but stuck in traffic if one box is missing (HoL blocking). HTTP/3 (QUIC) = many smart drones that can reroute independently when one is delayed.

Request Resources

HTTP/1.1

Multiple TCP Connections

HTTP/2

Multiplexed Streams (TCP HoL)

HTTP/3

Independent QUIC Streams

Faster LCP & Better Resilience

1HTTP/1.1

Uses multiple parallel TCP connections per origin. Suffers from repeated handshakes, slow-start penalties, and connection limits. Inefficient for modern pages with many assets.

network-waterfallhttp
Connection 1: index.html
Connection 2: style.css
Connection 3: script.js
... (up to browser limit)

2HTTP/2

Single TCP connection with multiplexing, header compression (HPACK), and server push. Still limited by TCP head-of-line blocking on packet loss.

3HTTP/3 (QUIC)

Runs over UDP. Independent streams, faster handshake, built-in encryption, better loss recovery, and connection migration. Ideal for mobile and unstable networks.

Key Takeaways
  • ✓HTTP/1.1: Multiple connections, high overhead
  • ✓HTTP/2: Multiplexing over TCP, better bandwidth use
  • ✓HTTP/3 (QUIC): Independent streams, no HoL blocking, fast recovery
  • ✓Mobile networks benefit most from QUIC's connection migration
  • ✓Protocol improvements amplify good frontend practices but don't replace them
  • ✓Always validate with real-user metrics (LCP, INP, resource timing)
PreviousNext

Topic Guide

On this page