Rapid-Fire Web & Networking.

A frontend engineer lives at the boundary of the browser and the network. Interviewers test that boundary with quick definitions — URL vs URI, the HTTP verbs, how the browser stores things, what stops a request cross-origin. Here's the rapid-fire round, each answer kept to the point.

What this guide covers

Addresses & HTTP — URL vs URI, methods, status codes, redirects
Storage & state — cookies, localStorage, sessionStorage, caching
Security & origins — CORS, the same-origin policy, CSRF vs XSS
The wire — HTTP versions, TCP vs UDP, WebSockets vs SSE, DNS
Loading & the browser — async vs defer, reflow vs repaint, resource hints

PT.1 · Addresses & HTTP

Naming things, and asking for them

The opening question is almost always a definition. Nail the precise wording — interviewers listen for whether you actually know the spec or are guessing.

URL vs URI vs URN?

A URI (Uniform Resource Identifier) is the umbrella — any string that identifies a resource. A URL (Locator) is a URI that also says how to find it via a protocol and location: https://site.com/page. A URN (Name) identifies by name without location: urn:isbn:0451450523. Every URL is a URI; not every URI is a URL. In everyday speech people say "URL" but mean URI.

GET vs POST?

GET retrieves data — params go in the URL, it's idempotent, safe, and cacheable, with no body by convention. POST submits data in a body, is neither safe nor idempotent (it creates/changes state), and isn't cached by default. Never put sensitive data in a GET URL — it lands in logs, history, and referrers.

PUT vs PATCH vs POST?

PUT replaces a resource entirely and is idempotent (same request twice = same result). PATCH applies a partial update. POST creates a new resource or triggers a non-idempotent action. "Idempotent" is the word they want: PUT/DELETE/GET are, POST is not.

What do the status code families mean?

1xx informational, 2xx success (200 OK, 201 Created, 204 No Content), 3xx redirection (301, 302, 304), 4xx client error (400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 429 Too Many Requests), 5xx server error (500, 502, 503). 401 = "who are you?"; 403 = "I know who you are, you still can't".

301 vs 302 redirect?

301 is permanent — browsers and search engines cache it and pass SEO "link juice" to the new URL. 302 (and the clearer 307) is temporary — don't cache, keep using the original. Use 301 for a moved page, 302 for a temporary A/B or maintenance redirect.

REST vs GraphQL?

REST exposes multiple endpoints, each returning a fixed shape — simple and cacheable, but prone to over- and under-fetching. GraphQL exposes one endpoint where the client specifies exactly the fields it needs in a single query — great for complex, nested data, at the cost of harder HTTP caching and more server setup.

PT.2 · Storage & State

Where the browser keeps things

"Where would you store a token?" is a trap that bundles three concepts — persistence, scope, and security. Know the table cold.

Cookies vs localStorage vs sessionStorage?

Cookies (~4KB) are sent with every HTTP request automatically — meant for server-read session data; secure them with HttpOnly, Secure, SameSite. localStorage (~5–10MB) persists until cleared and is never auto-sent. sessionStorage is the same but cleared when the tab closes and scoped per-tab. Both Web Storage APIs are synchronous and string-only.

Where should you store an auth token?

A short-lived token in memory plus a refresh token in an HttpOnly, Secure, SameSite cookie is the safest mainstream answer. localStorage is convenient but readable by any injected script — one XSS and the token leaks. The honest interview answer names the XSS-vs-CSRF trade-off rather than declaring one option universally "correct".

What does Cache-Control do?

It's the HTTP header that governs caching. max-age=N sets freshness seconds; no-cache means revalidate before use (not "don't cache"); no-store means never store; immutable means never revalidate; stale-while-revalidate serves stale instantly while refreshing in the background. Hash your static asset filenames so you can use a long max-age safely.

Session-based auth vs JWT?

Sessions store state server-side and hand the client an opaque ID in a cookie — easy to revoke, but needs shared storage to scale. JWTs are self-contained signed tokens the server can verify statelessly — scale well, but can't be revoked before expiry without a blocklist. Trade-off: revocability vs statelessness.

PT.3 · Security & Origins

What the browser won't let you do

Origins and the attacks against them are where interviewers separate juniors from people who've shipped to production.

What is the same-origin policy?

A browser security rule: script on one origin can't read responses from another origin. An "origin" is the triple scheme + host + port — change any one and it's cross-origin. It's why you can't fetch another site's authenticated data and read it freely.

What is CORS?

Cross-Origin Resource Sharing is how a server opts in to relaxing the same-origin policy, via response headers like Access-Control-Allow-Origin. For "non-simple" requests the browser first sends a OPTIONS preflight asking permission. Key point: CORS is enforced by the browser and configured on the server — the frontend can't fix a CORS error alone.

CSRF vs XSS?

XSS (Cross-Site Scripting) injects malicious script into your page to run with your users' privileges — defend by escaping output and a Content-Security-Policy. CSRF (Cross-Site Request Forgery) tricks a logged-in user's browser into making an unwanted request using their cookies — defend with anti-CSRF tokens and SameSite cookies. XSS steals/runs code; CSRF rides an existing session.

HTTP vs HTTPS?

HTTPS is HTTP over TLS — it encrypts traffic (confidentiality), verifies the server's identity via a certificate (authentication), and detects tampering (integrity). HTTP sends everything in plaintext. HTTPS is also a prerequisite for HTTP/2, service workers, and most modern web APIs.

PT.4 · The Wire

Protocols under the request

You don't need to implement TCP, but you should be able to say what each layer buys you and when to reach for a persistent connection.

HTTP/1.1 vs HTTP/2 vs HTTP/3?

1.1: one request at a time per connection (head-of-line blocking), text-based. 2: multiplexes many streams over one TCP connection, binary framing, header compression, server push. 3: runs over QUIC (UDP) instead of TCP, killing transport-level head-of-line blocking and giving faster connection setup, especially on flaky mobile networks.

TCP vs UDP?

TCP is connection-oriented and reliable — ordered, acknowledged, retransmitted — at the cost of latency (handshake + overhead). UDP is fire-and-forget: no guarantees of delivery or order, but fast and lightweight. TCP for web/file transfer, UDP for live video, games, and DNS where speed beats perfect delivery.

WebSocket vs SSE vs polling?

Polling repeatedly asks the server (simple, wasteful). SSE (Server-Sent Events) is a one-way server→client stream over HTTP, auto-reconnecting — good for feeds and notifications. WebSocket is a full-duplex two-way persistent connection — needed for chat, collaboration, and games. Pick the least powerful one that fits.

What happens during a DNS lookup?

The resolver checks caches in order — browser, OS, then the recursive resolver — and on a miss walks the hierarchy: root server → TLD server (.com) → authoritative server for the domain, which returns the IP. The result is cached per its TTL. It's the first network step before any TCP connection opens.

PT.5 · Loading & the Browser

Getting the page painted, fast

The last cluster is about how the browser turns bytes into pixels — and the small attributes that move performance numbers.

async vs defer on a script?

Both download the script without blocking HTML parsing. async executes as soon as it arrives — order not guaranteed, may interrupt parsing. defer waits until parsing finishes and executes in document order, right before DOMContentLoaded. Use defer for app code that depends on the DOM or other scripts; async for independent things like analytics.

Reflow vs repaint?

A reflow (layout) recomputes element geometry — expensive, and it cascades to children. A repaint redraws pixels without changing layout (e.g. a colour change) — cheaper. Changing transform/opacity can skip both via GPU compositing. Avoid layout thrashing by batching DOM reads before writes.

preload vs prefetch vs preconnect?

preload fetches a resource needed for the current page at high priority (fonts, the LCP image). prefetch fetches something likely needed on the next navigation at low priority. preconnect warms up the DNS+TCP+TLS handshake to a third-party origin so the eventual request is faster.

What is the critical rendering path?

The steps the browser takes from bytes to pixels: parse HTML → DOM, parse CSS → CSSOM, combine into the render tree, compute layout, then paint and composite. Render-blocking CSS and synchronous scripts in the <head> stall it — which is why we inline critical CSS and defer scripts.

What is a CDN, and why use one?

A Content Delivery Network is a geographically distributed set of edge servers that cache your static assets close to users. It cuts latency (shorter physical distance), offloads your origin, absorbs traffic spikes, and adds DDoS protection. The win is mostly in round-trip time: an edge node 20ms away beats a single origin 200ms away.

The bottom line

"The web rapid-fire round rewards precision over volume. Know the exact definitions — a URL is a URI that locates, PUT is idempotent and POST isn't, an origin is scheme+host+port — and know which side enforces each rule: the browser enforces same-origin and CORS, the server configures them; the browser enforces caching that Cache-Control declares. Most follow-ups are just 'and why?' — so always pair the definition with the reason it exists."

Five you should be ready to follow up on

Walk a request end to end. "What happens when you type a URL and hit enter?" stitches DNS, TCP/TLS, HTTP, and the critical rendering path into one story.
Debug a CORS error. Be ready to say it's fixed on the server with Access-Control-Allow-Origin, and to explain the preflight OPTIONS.
Defend against XSS and CSRF. Name CSP + output escaping for XSS, and tokens + SameSite for CSRF.
Justify a token storage choice. Frame it as the XSS (localStorage) vs CSRF (cookies) trade-off, then land on HttpOnly cookies + in-memory access token.
Explain why HTTP/2 helped. Multiplexing removed the need for hacks like domain sharding and sprite sheets that HTTP/1.1 forced on us.

Before you leave — how confident are you with this?

Your honest rating shapes when you'll see this again. No grades, no shame.

Comments

to join the discussion.

Loading comments…