前端网络与协议

除了掌握 HTML/CSS/JS，深入理解计算机网络协议也是高级前端工程师的必修课。

📚 目录

1. HTTP 协议发展史

• HTTP/0.9 & 1.0: 短连接，无状态。
• HTTP/1.1: 持久连接 (Keep-Alive)，管道化 (Pipelining)，缓存控制 (Cache-Control)。
• HTTP/2: 多路复用 (Multiplexing)，头部压缩 (HPACK)，服务器推送 (Server Push)。
• HTTP/3 (QUIC): 基于 UDP，解决 TCP 队头阻塞问题，0-RTT 连接。

2. HTTPS 与加密

• SSL/TLS 握手流程：
  1. Client Hello (支持的加密套件)
  2. Server Hello (选择的套件 + 证书)
  3. 验证证书
  4. 生成预主密钥 (Pre-master Secret)
  5. 生成会话密钥 (Session Key)
• 对称加密 vs 非对称加密：HTTPS 结合了两者（握手用非对称，传输用对称）。
• 中间人攻击：如何通过证书链校验防止。

3. TCP/IP 协议栈

• 三次握手 (Three-way Handshake)：
  • SYN -> SYN+ACK -> ACK
  • 为什么是三次？防止过期的连接请求被服务器误接受。
• 四次挥手 (Four-way Wave)：
  • FIN -> ACK -> FIN -> ACK
  • 为什么有 TIME_WAIT 状态？
• 滑动窗口与拥塞控制：慢启动、拥塞避免、快重传、快恢复。

4. WebSocket

• 全双工通信协议。
• 握手过程：基于 HTTP Upgrade 头部。
• 心跳检测与重连机制。

5. 跨域与安全

• 参见 ../浏览器原理/浏览器安全机制.md。

📝 常见面试题

1. GET 和 POST 的区别？

   • 语义：GET 获取，POST 提交。
   • 参数：GET 在 URL，POST 在 Body。
   • 缓存：GET 可缓存，POST 默认不可。
   • 长度限制：URL 有长度限制（浏览器限制），Body 理论无限制。
   • 数据包：GET 产生一个 TCP 包；POST 产生两个（Header + Body，部分浏览器优化为一个）。

2. HTTP 状态码

   • 200 OK / 204 No Content / 206 Partial Content
   • 301 Moved Permanently / 302 Found / 304 Not Modified
   • 400 Bad Request / 401 Unauthorized / 403 Forbidden / 404 Not Found
   • 500 Internal Server Error / 502 Bad Gateway / 503 Service Unavailable

3. 从输入 URL 到页面展示，网络层发生了什么？

   • DNS 解析
   • TCP 连接
   • TLS 握手
   • 发送 HTTP 请求
   • 接收响应
   • 断开连接

🔗 推荐工具

• Wireshark: 网络抓包分析。
• Chrome DevTools Network: 日常开发抓包。
• Postman: 接口调试。