我以前老把 fetch 当成 HTTP 的别名。

const res = await fetch;const data = await res.json;

直觉上很容易脑补成一句话：浏览器把一个 HTTP 请求发出去。服务端回一段 JSON，结束。

使用者痛点：很多前端同学在调试慢接口时只盯着 fetch 返回的 Promise 耗时却不知道背后还有多少层网络流程在消耗时间。

真把这条链路按时间顺序拆开之后我就不太敢这么说了。

fetch 只是最上面那层 API。它下面先后要，最终才会在前端拿到一个 OK。

使用者痛点：面对「接口慢」的报错信息，往往不知道该从「缓存」还是「DNS」还是「TLS」下手排查。

先把主线钉死。不然文章会分叉得没法看

为了把整条链讲透，我先固定一个场景。不过，下面都按这条主线说：

• 浏览器里第一次请求 https://api.example.com/user/profile
• 本地内存缓存、磁盘缓存和 Service Worker 都没有直接命中
• 浏览器里也没有可复用的现成连接
• 目标最终协商成 HTTP/ over TLS over TCP over IPv4 over Ernet
• 远端最先接住请求的不是业务代码，而是负载均衡或 Nginx 一类边界节点

If your page hits cache,request may never touch NIC. If browser already has a reusable connection,DNS/TCP/TLS stages might be skipped. If you’re using HTTP/3,transport switches to QUIC over UDP.

This article focuses on a “cold‑start,first‑time‑outbound” full chain – most illustrative way to map OSI seven layers onto a real request.

总图

sequenceDiagram
autonumber
participant JS as JS / fetch
participant B as 浏览器
participant SW as Cache / Service Worker
participant DNS as DNS 解析链
participant OS as OS 网络栈
participant GW as 网关 / ARP
participant NET as 交换机 / 路由 / NAT / Internet
participant EDGE as LB / Nginx
participant APP as 应用服务
JS->B这方面，fetch
B->SW这方面，检查缓存、Service Worker 、连接池
alt 本地直接命中
从SW-->B来看，返回缓存响应
从B-->JS来看。Promise resolve
else 需要真正出网
说到B->DNS，解析域名 → IP
DNS-->B: 返回目标 IP
至于B->OS，创建或复用 socket
OS->GW这方面，查路由，ARP/NDP 找下一跳 MAC
GW-->OS: 返回网关 MAC
OS->NET: TCP 三次握手 + TLS 握手 + HTTP 数据
NET->EDGE: 经交换机/路由器/NAT/运营商网络转发
EDGE->APP: TLS 终止 → 反向代理 → 转发到业务
APP-->EDGE: 生成 HTTP 响应
EDGE-->NET: 响应沿原链路返回
NET-->OS: 收包·校验·重组
说到OS-->B，把响应字节交回浏览器
再看B-->JS，Promise resolve,res.json
end

This diagram hides three often‑ignored details:

1. The browser makes a decision **before** any packet leaves machine.
2. The DNS lookup itself is a full network flow.
3. The first server that sees your request is usually a boundary node,not your business logic.

七层先别背，先看它在这条链里分别长什么样

The reality of engineering rarely gives you seven neat “drawers”. Presentation and Session layers are scattered across TLS handshakes,encoding/compression libraries and connection‑reuse mechanisms. Still,using seven‑layer model helps you ask “who owns this step? ”.

浏览器先决定这方面，这次请求到底用不用真的出网

The moment you call .fetch,browser does **not** immediately push bits onto wire.

• The URL is parsed first – protocol,host,port,path & query string – which determines same‑origin policy,connection pooling and which stack will be used.
• If any of memory cache,disk cache or an active Service Worker can satisfy request,it returns a response locally. This is *** PWA offline support and API mock can feel instantaneous.
• If only a **conditional** cache entry exists a lightweight HEAD request still goes out – from front‑end perspective it looks like “served from cache”。but under hood re’s still network traffic.
• The browser also checks its connection pool. A reusable HTTP/2 or QUIC stream eliminates DNS/TCP/TLS overhead entirely – DevTools will show empty “DNS Lookup”,“Initial Connection”,“SSL” phases in that case.
• CORS preflight adds an extra OPTIONS round trip when custom methods or headers trigger it – what looks like one API call may actually be two network requests.

This stage mainly involves Application and Session layers – caching policy,CORS rules and connection reuse – while still staying far away from NIC.

DNS 不是配角，它自己也是一整条链很多人把 DNS 当成一次本地函数调用，却忽视了它也会走网络且可能被劫持。

li> 浏览 器 自己的 DNS 缓存 li> 操作程序 缓存 li> 本机 stub resolver 或本地 DNS 服务 li> 递归解析器 li> 如有必要。根域 → 顶级域 → 权威服务器 的逐级查询 li> 返回 A/AAAA/CNAME 记录还有 TTL ol>

li> 返回的 IP 往往是 CDN 边缘节点或负载均衡 VIP，而不是业务服务器本身。li> 大多数查询走 UDP；大包或 DoT/DoH 则切换到 TCP/TLS。li> 同时获取 IPv4 和 IPv6 并采用 Happy Eyeballs 策略，以最快可达地址建立连接。话说回来，ul>

有了 IP。还要决定“下一跳是谁”，怎么说呢，这是三层和二层首次交汇。

The OS receives target IP and consults its routing table to decide which interface and which next-hop MAC address to use. If destination is on a different subnet。it sends packets to default gateway . The crucial point is that ** NIC needs only MAC of next hop**,not of ultimate server.

AR P/NDP 常被忽视，以致抓包时看到大量广播，却不明白它们的意义。

If re’s no ARP entry for that next hop on IPv4。host broadcasts an ARP Request . The gateway replies with its MAC address and caches it for future packets.

真开始建连接时传输层才算正式上场“Initial connection” 长时间常被误认为是服务器慢，其实可能是 SYN 重传或三次握手延迟。

li> 建立 TCP 三次握手。此过程同步并确认双向可达。li> 在同一套 TCP 上进行 TLS 握手。客户端发送 ClientHello。其中包含 SNI 与 ALPN，让服务器能够选择正确证书和协议。ol>