Browser Fundamentals for Front-end Engineers

Know where data can live in the browser, in what order async work runs, and how assets and requests travel. Most “JavaScript fundamentals” turn out to be one of these.

Storage

	Cookies	localStorage	sessionStorage
Size	~4 KB each	~5 MiB per origin	~5 MiB per origin
Lifetime	Until expiry	Until cleared	Until the tab closes
Sent to the server	Yes, on every request	No	No
Typical use	Auth/session tokens (HttpOnly, Secure, SameSite)	Preferences, theme	Form drafts, checkout steps

• Going over quota throws QuotaExceededError.
• For bigger data, use IndexedDB or the File System API; Chrome lets an origin use a large share of free disk.
• Keep tokens out of localStorage where you can: any XSS can read it, but it can’t read an HttpOnly cookie.

The event loop

JavaScript is single-threaded; the event loop stops async work from blocking it.

1. Run the current call stack to completion.
2. Drain the microtask queue completely: promise callbacks (.then, await continuations), queueMicrotask.
3. Take one macrotask from the task queue: setTimeout, I/O, UI events such as clicks.
4. Render if needed, then repeat.

setTimeout(() => console.log("timeout"));
Promise.resolve().then(() => console.log("promise"));
console.log("sync"); // sync → promise → timeout

Node has the same idea with extra phases: The Node.js Event Loop, Streams and Backpressure.

CDNs

• Edge servers replicate static assets (and sometimes whole pages) close to users; add regions where your users are.
• DNS routes each user to the lowest-latency edge. Cloudflare, CloudFront and Azure CDN are the usual suspects.
• They pair naturally with SSG/ISR pages (Front-end Rendering Strategies and Architecture) and responsive image variants (Front-end Performance Checklist).

XSS

Injected script runs in your users’ browsers, either stored (in a database) or reflected (from a URL), and can steal sessions or act as the user. Validate input, escape output and set a Content Security Policy. The React-specific details are in Preventing XSS in React.

The n+1 request problem

Fine-grained APIs force a chain of requests per item: get the product, then its price, then rates, then discounts. Fixes: an aggregate endpoint, a BFF or GraphQL query that returns the joined data, and caching HTTP responses.

File uploads: base64 vs multipart

Base64 inside JSON inflates files by about a third and has to be held in memory on both sides. multipart/form-data (FormData) streams the raw bytes with metadata fields alongside, so it’s the right default for user uploads. For big files, upload straight to object storage with a pre-signed URL.

In short

• setTimeout, a resolved promise’s .then, and a sync log run in the order: sync, promise, timeout.
• Cookies are the only storage sent with every request.
• Multipart beats base64 for uploads: no size bloat, and it streams instead of buffering.