Web 开发者需要了解的网络知识

前言

做 Web 开发可以不了解网络底层的每一个细节，但理解 HTTP、DNS、CDN、HTTPS 这些核心概念是必须的。它们是浏览器和服务器之间的”交通规则”，搞清楚了，调试问题和优化性能时思路会清晰很多。

OSI 模型与 TCP/IP 模型^{1OSI（Open Systems Interconnection）七层模型是国际标准化组织（ISO）制定的网络通信理论模型，从物理层到应用层描述网络通信过程。实际应用中更常用 TCP/IP 四层模型。}

七层 vs 四层

对 Web 开发来说，只需要关注上面三层（或四层），真正打交道最多的是应用层的 HTTP。

TCP vs UDP

三次握手与四次挥手

TCP 三次握手^{2TCP 三次握手确保双方都能收发数据：客户端发 SYN 表示”我想连接”，服务器回 SYN+ACK 表示”收到，我也准备好了”，客户端再发 ACK 表示”好的，开始吧”。}（建立连接）

TCP 四次挥手（断开连接）

HTTP 协议

HTTP 版本演进

HTTP 请求方法

常见 HTTP 请求头

HTTP 状态码

1xx 信息         2xx 成功         3xx 重定向
4xx 客户端错误    5xx 服务器错误

常见响应头

HTTPS / TLS^{6TLS（Transport Layer Security）传输层安全协议，是 SSL 的后继者。TLS 1.2 和 TLS 1.3 是当前主流版本，提供加密、数据完整性和身份验证。}

HTTPS 是 HTTP 在 TLS（传输层安全协议）之上的加密版本。

HTTP vs HTTPS

TLS 握手简要过程

DNS（域名系统）

DNS 将人类可读的域名（example.com）转换为机器可读的 IP 地址（93.184.216.34）。

DNS 解析过程^{7DNS 递归查询：本地 DNS 服务器代替客户端逐级查询（根域名服务器 → 顶级域服务器 → 权威域名服务器），客户端只需发一次请求。}

常见 DNS 记录类型

常用公共 DNS

CDN（内容分发网络）

CDN 把内容缓存到离用户更近的边缘节点^{8CDN 边缘节点是部署在全球各地的服务器，物理上靠近用户，缓存静态内容以减少延迟。当用户请求资源时，智能调度系统会返回最近节点的 IP。}，加速访问。

CDN 工作原理

CDN 的 CDN 核心步骤

1. 用户请求资源 → DNS 解析到 CDN 的智能调度系统
2. 调度系统返回离用户最近的边缘节点 IP
3. 边缘节点如有缓存，直接返回（命中）
4. 没有缓存 → 回源拉取，缓存后再返回

使用 CDN 的好处

CDN 适合缓存的内容

• 静态资源：JS / CSS / 图片 / 字体
• 视频、音频文件
• 不频繁变动的 JSON 数据
• 动态 API 响应（除非配合边缘计算或针对性配置）

HTTP 缓存策略

两大类型

Cache-Control 指令

缓存策略组合

# 静态资源（JS/CSS/图片）使用版本号/哈希做缓存破坏
Cache-Control: public, max-age=31536000, immutable

# HTML 页面：每次都验证是否更新
Cache-Control: no-cache

# API 响应：短时间缓存
Cache-Control: private, max-age=60

# 敏感信息：完全不缓存
Cache-Control: no-store

缓存破坏（Cache Busting）

更新静态资源时改文件名或查询参数，强制浏览器加载新版本：

<!-- 旧版本 -->
<script src="bundle.js"></script>

<!-- 新版本：通过哈希或版本号改变 URL -->
<script src="bundle.v2.js"></script>
<script src="bundle.js?v=2"></script>
<script src="bundle.abc123.js"></script>

条件请求验证

服务器收到条件请求后，如果资源未变更，返回 304 Not Modified（不返回 body），浏览器继续使用本地缓存。

Cookie

Cookie 是服务器存储在浏览器中的一小段数据，用于维持状态（因为 HTTP 是无状态的）。

Cookie 属性

Set-Cookie: session=abc123; HttpOnly; Secure; SameSite=Lax

CORS（跨域资源共享）

当浏览器发起的请求与当前页面协议、域名、端口任一不同时，就属于跨域请求。CORS 是服务器告诉浏览器”这个跨域请求是安全的”的机制。

简单请求 vs 预检请求^{9CORS 预检请求（OPTIONS）用于检查服务器是否允许实际的跨域请求。只有简单请求（GET/HEAD/POST + 基本头）可以跳过预检。}

CORS 响应头

# 允许的来源（必须）
Access-Control-Allow-Origin: https://example.com
# 或通配符（不能用于认证请求）
Access-Control-Allow-Origin: *

# 允许的方法（预检响应）
Access-Control-Allow-Methods: GET, POST, PUT, DELETE

# 允许的请求头（预检响应）
Access-Control-Allow-Headers: Content-Type, Authorization

# 是否允许携带 Cookie
Access-Control-Allow-Credentials: true

# 预检结果缓存时间
Access-Control-Max-Age: 86400

WebSocket

WebSocket 是 HTML5 引入的协议，在客户端和服务器之间建立全双工（双向同时通信）的持久连接。

HTTP vs WebSocket

WebSocket 握手

// 客户端发起
const ws = new WebSocket('wss://example.com/chat');

ws.onopen = () => console.log('连接已建立');
ws.onmessage = (event) => console.log('收到消息:', event.data);
ws.onclose = () => console.log('连接已关闭');
ws.onerror = (err) => console.error('错误:', err);

// 发送消息
ws.send('Hello Server');

握手过程基于 HTTP 升级：

GET /chat HTTP/1.1
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Version: 13
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==

HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

浏览器输入 URL 后的完整过程

这是一个经典的面试问题，也帮你理清所有网络概念：

学习路线图

• 理解 OSI / TCP-IP 分层模型
• 掌握 HTTP 请求方法和状态码
• 理解 DNS 解析过程
• 了解 HTTPS / TLS 握手原理
• 理解 CDN 的工作原理和使用场景
• 学会 HTTP 缓存策略配置
• 理解 CORS 和 Cookie 的工作机制
• 了解 WebSocket 和 HTTP 的区别
• 能完整描述浏览器输入 URL 后的全过程

总结

网络知识面很广，初期不需要把每层协议都吃透。先从最常用的 HTTP 开始，遇到具体的性能问题再往下深挖。背面试题不如真正用一次，抓包看看真实的请求和响应，印象会深很多。

参考来源

• MDN Web Docs: HTTP Overview
• MDN Web Docs: HTTP 状态码
• MDN Web Docs: HTTP 缓存
• MDN Web Docs: CORS
• MDN Web Docs: HTTP Cookie
• MDN Web Docs: WebSocket