Browser Networking 101

DNS, TCP/TLS, HTTP/1.1 vs H2/H3, connection reuse, and what frontend code can actually influence.

intermediate3 min readUpdated Aug 4, 2026

browser
networking
http
performance

Frontend performance often dies in the network stack before your React tree mounts. You do not implement TCP, but you choose hosts, connection count, protocol, payload size, and discovery order — and those dominate TTFB and LCP on real devices.

Docs: High Performance Browser Networking (Ilya Grigorik), MDN HTTP, web.dev HTTP/2.

Path of a request (simplified)

DNS lookup → TCP connect → TLS handshake → HTTP request → server work → response bytes

On HTTP/3 (QUIC) the connect story differs (UDP, combined crypto), but the frontend still cares about RTT count, bytes, and priority.

Cost	What increases it	Frontend levers
DNS	New hostnames	Fewer origins, `dns-prefetch` / `preconnect`
TCP+TLS	New connections	Connection reuse, H2/H3, preconnect
TTFB	Origin work, cold cache	CDN, SSR caching, edge
Download	Size, bandwidth	Compression, modern formats, code-split

Origins and connection limits

Browsers limit concurrent connections per origin (especially on HTTP/1.1). Domain sharding was an old H1 trick; on H2/H3 it often hurts (extra handshakes, worse prioritization). Prefer one well-configured CDN origin for static assets.

HTTP versions in one table

	HTTP/1.1	HTTP/2	HTTP/3
Multiplexing	Limited (pipelining rare)	Yes (single TCP)	Yes (QUIC)
Head-of-line	TCP + H1 issues	TCP HOL still exists	Better under loss
Header compression	No (HPACK is H2)	HPACK	QPACK
Frontend config	—	Server/CDN	Server/CDN

You enable H2/H3 on the edge, not in React. Frontend still: don’t open dozens of hosts, don’t ship megabyte JS, use cache headers.

What your markup controls

<link rel="preconnect" href="https://cdn.example.com" crossorigin />
<link rel="preload" as="image" href="/hero.avif" fetchpriority="high" />
<script type="module" src="/app.js"></script>

preconnect: warm DNS+TLS for a critical third-party origin.
preload: early discovery of something the parser would find late.
module/defer: stop parser-blocking classic scripts.

Fetch and connection behavior

await fetch('/api/items', {
  method: 'GET',
  credentials: 'same-origin',
  // keepalive: true for unload beacons (limited body size)
});

Browsers pool connections. Many parallel fetches to one origin ride H2 streams. Cross-origin without CORS/preflight correct config fails in JS even if Network shows the request.

Caching is networking

A request not made is the fastest request. Cache-Control, ETag/If-None-Match, and service worker Cache change the path entirely — see HTTP caching headers.

Interview out-loud

“A request pays DNS, connect/TLS, TTFB, then download. I reduce origins, enable H2/H3 at the edge, compress and cache, and use preconnect/preload only for proven critical third parties — not shotgun hints.”

Frontend levers ranked

Fewer bytes (compress, image formats, code-split) — always wins.
Fewer origins on the critical path — cuts handshakes.
Cache correctly — eliminates repeat cost.
Early discovery (preload/preconnect, SSR HTML) — cuts resource delay.
Protocol (H2/H3 at edge) — ops lever; verify it is actually on.

When LCP is bad, measure whether you’re waiting on document TTFB, late discovery of the hero, or download of a multi-megabyte asset. Networking knowledge without measurement becomes cargo cult preconnects.