Browser Caching and CDN Fundamentals: Client-Side Performance Optimization

Browser Cache Layers 🌐

Modern browsers implement multiple cache layers on the client side:

1. DNS Cache (Not Developer-Accessible)

• Automatically caches DNS query results
• Access via chrome://net-internals/#dns (Chrome only)
• Speeds up domain name resolution

2. File and Media Cache (Not Developer-Accessible)

• Stores browsing history, downloads, images, cookies, passwords
• Example: A typical browser might cache 1.2 GB of images and files
• Cleared via "Delete browsing history"

3. Developer-Accessible Storage

Cookies & Session Storage: 1-10 KB

• Small data storage
• Accessible via JavaScript

Local Storage: Larger capacity

• Use cases: Theme preferences (dark/light mode), user settings

IndexedDB: Up to 10+ MB (varies by browser/system)

• For large datasets
• Example: Google Maps caches map tiles here instead of fetching on every request

Content Delivery Networks (CDNs) 📦

CDNs are third-party services — separate from both client and backend, similar to how DNS operates independently.

What Gets Cached in CDNs

Store large, static content that doesn't change frequently:

• Images uploaded by users
• Videos
• PDFs
• Any multimedia files

Threshold: Files > 10 KB are considered "large" from a database perspective.

Example from Facebook

When you inspect an image on Facebook, the URL reveals:

Notice fbcdn (Facebook CDN). The image isn't served from the database; it's cached in the CDN.

Why CDNs Are Essential: The Physics Problem 🌍

Scenario: Scaler's Global User Base

Setup:

• Scaler's AWS servers hosted in Mumbai region
• Database, S3 storage, and images all in Mumbai
• Students exist globally, including the United States

Problem: A US student requests an image stored in Mumbai.

The Speed of Light Constraint

Geographic reality: India and the US are on opposite sides of the globe. A request must traverse the entire Earth's circumference.

Earth's circumference: 40,000 km

Speed of light in fiber optic cables: ~300 million meters/second (slower than vacuum)

Minimum round-trip time (India ↔ US): 200 milliseconds

This is a cosmic limitation. No amount of database optimization, infrastructure upgrades, or engineering genius can bypass the speed of light.

Latency vs. Bandwidth: The Pipe Analogy

Latency: How long it takes for a water drop to travel through a pipe (end-to-end delay)

Bandwidth: How much water can flow through the pipe per second (throughput)

• Longer pipe = higher latency
• Wider pipe = higher bandwidth

Cross-Continental Transfer Problems

High latency: Geographic distance creates unavoidable delay.

Low bandwidth: Transatlantic cables serve billions of users simultaneously. Your bandwidth is limited by the slowest node (hub/router) your request passes through.

Result: A US student watching a Mumbai-hosted video experiences poor quality high latency, low bandwidth.

CDN Scale: The Backbone of the Internet 🏗️

70% of all internet traffic is handled by CDNs, including:

• Streaming services (Netflix, YouTube)
• Social media (Facebook, Instagram)
• E-commerce (Amazon, Flipkart)
• High-frequency trading platforms

Total CDN bandwidth worldwide: Exceeds 10 petabits per second

Storage capacity: Over 1 zettabyte across all providers

Akamai alone: Handles 3 exabytes of data per day

CDNs are the backbone of the internet this infrastructure enables the modern web to function at scale.

---

Next: How CDN upload and download flows work in practice.