Web Fundamentals

How CDNs Work: Edge Delivery, Caching & 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)
easyWeb Fundamentals

How CDNs Work: Edge Delivery, Caching & Performance

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

Topic content

TL;DRCDN = global edge cache layer. Cache hits serve from nearby PoPs; misses fetch from origin and populate cache.
High Signal
Google
Meta
Netflix
Agoda
Cloudflare
30-Second Answerstart every interview with this

A CDN is a distributed network of edge servers that cache and deliver content closer to users. It improves speed (shorter distance), reduces origin load (fewer requests), boosts reliability (distributed capacity), and adds security (edge protections). The real power lies in smart cache policies.

Instead of every customer traveling to the main factory (origin server) for every item, local warehouses (edge PoPs) keep popular items in stock. When a customer orders, they get it from the nearest warehouse. If the item isn't there, the warehouse quickly restocks from the factory and keeps it for the next customer.

User Request
DNS routes to nearest Edge PoP
Cache Hit → Instant Response
Cache Miss → Fetch from Origin + Cache
Faster Delivery + Lower Origin Load

1How a CDN Works

Client → DNS/Anycast routes to nearest PoP → Edge checks cache key → Hit: serve immediately. Miss: fetch from origin, cache response, return to client.

2Key Benefits

Faster load times, reduced bandwidth/egress costs, higher availability through distribution, and edge-layer security (DDoS protection, WAF).

3Cache Policy Fundamentals

Cache key design, TTL / Cache-Control headers, and purge strategy determine hit ratio, freshness, and cost.

Key Takeaways
  • ✓CDN = distributed edge cache layer between users and origin
  • ✓Cache hits serve from nearby PoP for speed and lower origin load
  • ✓Cache key + TTL + purge strategy control effectiveness
  • ✓Major benefits: speed, cost savings, reliability, security
  • ✓Not a replacement for good origin architecture
  • ✓Measure real impact on TTFB, LCP, and origin traffic
  • ✓Policy design matters more than just having a CDN
PreviousNext

Topic Guide

On this page