概览
前端面试对计算机网络的考察，主要集中在应用层（HTTP/HTTPS/DNS解析） 和 传输层（TCP/UDP/可靠传输机制）。高级前端还需要深入理解协议演进（HTTP 1.0 -> 3.0）、TLS 握手过程以及网络安全攻防。
网络协议分层模型 (TCP/IP 五层模型)
虽然 OSI 理论上有七层模型，但在实际的互联网工程中，我们通常按照 TCP/IP 五层模型 来理解网络通信。数据从应用层产生，向下层层封装（加请求头），最终通过物理层发送；接收端则层层解包。
1. 应用层 (Application Layer)
直接为用户的应用进程提供服务。数据单位称为报文 (Message)。
- 核心协议：
HTTP / HTTPS：前端每天都在打交道的超文本传输协议。DNS：域名系统，将www.google.com解析为 IP 地址。WebSocket / SSH / FTP等。
- 面试高频考点：
- HTTP 状态码及其细分场景（如 301 vs 302，401 vs 403）。
- HTTP 1.0 / 1.1 / 2.0 / 3.0 的演进历程与核心优化（如队头阻塞、多路复用、QUIC）。
- HTTPS 加密原理（对称加密 + 非对称加密 + CA 数字证书）。
- 从输入 URL 到页面渲染的完整过程（涵盖 DNS 查找、TCP 握手等）。
2. 传输层 (Transport Layer)
负责向两台主机进程之间的通信提供数据传输服务。数据单位称为报文段 (Segment) 或用户数据报。
- 核心协议：
TCP (Transmission Control Protocol)：面向连接的、可靠的字节流服务。UDP (User Datagram Protocol)：无连接的、尽最大努力交付的数据报服务。
- 面试高频考点：
- TCP 三次握手与四次挥手（为什么不是两次/五次？TIME_WAIT 状态的作用？）。
- TCP 如何保证可靠传输？（校验和、序列号、确认应答、超时重传）。
- 流量控制（滑动窗口机制）与拥塞控制（慢开始、拥塞避免、快重传、快恢复）。
- TCP 与 UDP 的区别及适用场景（如视频直播/游戏通常用 UDP，甚至 HTTP/3 底层也是基于 UDP 的 QUIC 协议）。
3. 网络层 (Network Layer) - 了解即可
负责为分组交换网上的不同主机提供通信服务。数据单位称为数据报 (Datagram) / 分组 (Packet)。
- 核心协议：
IP (Internet Protocol)协议。 - 核心作用：路由选择（决定数据包该走哪条路径）和逻辑寻址（IP 地址）。
- 面试考点：极少考。偶尔会问 IPv4 与 IPv6 的区别，或者路由器工作在哪一层。
4. 数据链路层 (Data Link Layer) - 了解即可
负责将网络层交下来的 IP 数据报组装成帧 (Frame)，在两个相邻节点间的链路上传送。
- 核心协议：
ARP（地址解析协议，IP -> MAC地址）、MAC协议。 - 核心作用：物理寻址（MAC 地址）、错误检测。
- 面试考点：交换机工作在哪一层。
5. 物理层 (Physical Layer) - 无需关注
负责在物理媒体上实现比特流的透明传输。数据单位是比特 (Bit)。
- 核心组件：网线、光纤、中继器、集线器等。
服务器推送技术：SSE
在 ChatGPT 等 AI 爆火的背景下，流式响应（打字机效果）成为了前端基建标配。
SSE (Server-Sent Events)：
通信方向：单向通信（只能服务端向客户端推数据）。
协议层：基于纯粹的 HTTP 协议。
优势：轻量级，原生支持断线自动重连，支持自定义事件类型，非常适合 AI 流式输出、实时股票/新闻推送。
Node.js 原生实现示例：
const http = require("http");
http
.createServer((req, res) => {
if (req.url === "/stream") {
// 1. 设置核心响应头，开启 SSE 模式
res.writeHead(200, {
"Content-Type": "text/event-stream", // 唯一强制要求的必填项，告诉浏览器这是 SSE 流
"Cache-Control": "no-cache", // 强烈建议：防止代理服务器或浏览器缓存数据导致流被阻塞
Connection: "keep-alive", // 强烈建议：保持长连接不断开（虽然 HTTP/1.1 默认是 keep-alive，但显式声明更稳妥）
});
// 2. 模拟打字机效果，每秒推一次数据
let count = 0;
const intervalId = setInterval(() => {
// SSE 的数据格式非常严格：必须以 "data: " 开头，以 "\n\n" 结尾
res.write(
`data: ${JSON.stringify({ msg: `Message ${++count}` })}\n\n`,
);
}, 1000);
// 3. 客户端断开连接时，清理定时器
req.on("close", () => {
clearInterval(intervalId);
res.end();
});
}
})
.listen(3000);
高级前端网络面试：重点突破方向
针对高级前端，面试官往往不会直接问“三次握手是什么”，而是会结合实际场景和性能优化来提问。你需要重点准备以下几个方向：
HTTP/2 与 HTTP/3 的底层革命
- HTTP/2 的队头阻塞问题：HTTP/2 引入了多路复用，解决了 HTTP 1.1 应用层的队头阻塞（多个请求可以共享一个 TCP 连接并发发送）。但是，底层仍然是 TCP。TCP 保证绝对可靠，如果并发的多个请求中有一个数据包丢了，整个 TCP 连接都会被阻塞等待重传，这就是“TCP 层的队头阻塞”。
- HTTP/3 抛弃 TCP 转向 UDP (QUIC)：为了彻底解决 TCP 的队头阻塞，HTTP/3 底层采用了基于 UDP 的 QUIC 协议。QUIC 在 UDP 之上自己实现了可靠传输、拥塞控制，不仅没有队头阻塞，还实现了 0-RTT 极速握手 和 连接迁移（如手机从 WIFI 切换到 5G，IP 变了但连接不断）。
网络性能优化实战
- 资源预加载 (Resource Hints)：
- 底层原理解析（面试官追问：网络进程就一个，预加载是怎么做到的？）
现代浏览器的架构中，确实只有一个专门的“网络进程（Network Process）”负责所有的网络请求。但是，网络进程内部并不是单线程的！它底层维护了一个下载任务队列，并根据 HTTP 协议版本（如 HTTP/1.1 每域名 6 个 TCP 连接限制，或 HTTP/2 的多路复用）进行并发调度。当解析到
<link rel="preload">等标签时，浏览器的“渲染进程”会给“网络进程”发送一个 IPC（进程间通信）消息，网络进程会根据我们设定的 Resource Hints 给这些任务赋予不同的优先级，插入到它的并发下载队列中。 dns-prefetch：提前解析域名的 IP，省去 DNS 查找时间。preconnect：比 dns-prefetch 更进一步，不仅解析 DNS，还提前完成 TCP 和 TLS 握手。preload：最高优先级。强制浏览器在不阻塞 HTML 解析的情况下，并行下载当前页面必定会用到的关键资源（如核心字体、首屏大图）。下载后存入内存缓存，等用到时直接秒出。prefetch：最低优先级。利用浏览器主线程和网络进程完全空闲的时间，偷偷下载下一个页面可能会用到的资源（预判用户行为）。如果此时有高优先级的请求进来，prefetch 任务会被挂起甚至取消。
- 底层原理解析（面试官追问：网络进程就一个，预加载是怎么做到的？）
现代浏览器的架构中，确实只有一个专门的“网络进程（Network Process）”负责所有的网络请求。但是，网络进程内部并不是单线程的！它底层维护了一个下载任务队列，并根据 HTTP 协议版本（如 HTTP/1.1 每域名 6 个 TCP 连接限制，或 HTTP/2 的多路复用）进行并发调度。当解析到
- 动静分离与 CDN：将静态资源（JS/CSS/图片）部署到 CDN（内容分发网络），利用边缘节点就近返回给用户；动态 API 请求则打到源站服务器。
- 资源预加载 (Resource Hints)：