网络与协议 · 45/72
1. Ajax、Axios、Fetch 对比 2. Ajax 原理 3. Ajax 技术与实现 4. 常见的应用层协议 5. 浏览器缓存的存储位置 6. 从输入 URL 到页面显示的过程 7. Cache-Control 常见配置值 8. CDN 工作原理 9. 为什么推荐将静态资源放到 CDN 上 10. Cookie 的弊端 11. Cookie 的 Secure 属性设置 12. CORS 请求携带身份凭证的方法 13. CORS 跨域原理 14. 复杂请求预检检查内容 15. CORS 预检请求 16. CORS简单请求的条件 17. 简单请求为何无需预检 18. DNS 域名解析与网络请求路由 19. 什么是跨域 20. 什么是 DNS 劫持? 21. DNS 预解析优化网页加载速度 22. DNS 解析过程与优化 23. URL 参数为什么需要 encodeURIComponent 转码 24. Last-Modified 和 ETag 的区别 25. Fetch 发送两次请求的原因 26. 正向代理与反向代理 27. 前后端通信方式 28. GET请求能否上传图片 29. GET 请求的传参长度限制 30. HTTP 缓存策略 31. GET 与 POST 的区别 32. HTTP状态码301与302的区别 33. HTTP 数据传输 34. HTTP 队头阻塞 35. HTTP 请求头和响应头的重要字段 36. HTTP发展历程 37. HTTP与HTTPS总结 38. HTTP 和 HTTPS 的区别 39. HTTP 报文结构与状态码 40. HTTP Keep-Alive 机制 41. HTTP管道机制的作用 42. HTTP协议优缺点 43. HTTP 重定向状态码 301/302/303/307/308 44. HTTP 请求方法 45. HTTP 协议版本演进 46. HTTP与TCP的区别 47. HTTP/2 多路复用原理 48. HTTPS 协议的缺点 49. HTTP/3 如何保证传输可靠性 50. HTTP/2 的改进 51. HTTPS 加密原理 52. 什么是负载均衡? 53. Nginx 负载均衡调度算法 54. Nginx 是什么 55. 对象存储 OSS 是什么 56. OPTIONS 请求方法及使用场景 57. 轮询与 WebSocket 对比 58. HTTPS 中 SSL 的 OSI 层位置 59. SSL连接恢复 60. 强缓存和协商缓存 61. TCP 三次握手与四次挥手 62. TCP三次握手中的数据传输 63. TCP 和 HTTP 请求的关系 64. TCP/IP 协议 65. TCP 如何判断丢包 66. TCP 与 UDP 的区别 67. WebSocket 的 Handshaking 握手过程 68. TLS 1.3 相比 TLS 1.2 的改进 69. URI、URL、URN 的区别 70. WebSocket 心跳机制 71. WebSocket 协议原理 72. XML与JSON对比

HTTP 协议版本演进

HTTP 1.0、1.1、2.0、3.0 的主要区别与特性对比

问题

HTTP 1.0、1.1、2.0、3.0 (QUIC) 各有什么特点?它们是如何演进的?

解答

HTTP 1.0

最早的 HTTP 版本,特点是短连接

客户端                服务器
  |---- TCP 握手 ---->|
  |---- 请求 1 ------>|
  |<--- 响应 1 -------|
  |---- TCP 挥手 ---->|
  
  |---- TCP 握手 ---->|  (新连接)
  |---- 请求 2 ------>|
  |<--- 响应 2 -------|
  |---- TCP 挥手 ---->|

每次请求都要建立新的 TCP 连接,开销大。

HTTP 1.1

引入长连接,默认 Connection: keep-alive

客户端                服务器
  |---- TCP 握手 ---->|
  |---- 请求 1 ------>|
  |<--- 响应 1 -------|
  |---- 请求 2 ------>|  (复用连接)
  |<--- 响应 2 -------|
  |---- 请求 3 ------>|
  |<--- 响应 3 -------|
  |---- TCP 挥手 ---->|

问题:队头阻塞(Head-of-Line Blocking)。请求必须按顺序响应,前面的请求慢会阻塞后面的。

// 浏览器通常对同一域名开 6 个 TCP 连接来缓解
// 这也是为什么有域名分片的优化手段

HTTP 2.0

基于 Google 的 SPDY 协议,引入三大特性:

1. 多路复用

一个 TCP 连接上可以并行传输多个请求/响应,互不阻塞:

┌─────────────────────────────────────┐
│           单个 TCP 连接              │
├─────────────────────────────────────┤
│  Stream 1: 请求A ──────> 响应A      │
│  Stream 2: 请求B ──> 响应B          │
│  Stream 3: 请求C ────────────> 响应C │
└─────────────────────────────────────┘

2. 头部压缩 (HPACK)

# HTTP 1.1 每次请求都发送完整头部
GET /page1 HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0...
Accept: text/html...
Cookie: session=abc123...

GET /page2 HTTP/1.1
Host: example.com           # 重复
User-Agent: Mozilla/5.0...  # 重复
Accept: text/html...        # 重复
Cookie: session=abc123...   # 重复

# HTTP 2.0 使用索引表 + 哈夫曼编码
# 重复的头部只发送索引号,压缩率可达 90%+

3. Server Push

服务器可以主动推送资源:

// 客户端请求 index.html
// 服务器可以主动推送 style.css 和 app.js

// Node.js 示例 (http2 模块)
const http2 = require('http2');
const fs = require('fs');

const server = http2.createSecureServer({
  key: fs.readFileSync('server.key'),
  cert: fs.readFileSync('server.crt')
});

server.on('stream', (stream, headers) => {
  if (headers[':path'] === '/index.html') {
    // 主动推送 CSS
    stream.pushStream({ ':path': '/style.css' }, (err, pushStream) => {
      pushStream.respond({ ':status': 200, 'content-type': 'text/css' });
      pushStream.end('body { color: red; }');
    });
    
    // 响应 HTML
    stream.respond({ ':status': 200, 'content-type': 'text/html' });
    stream.end('<html>...</html>');
  }
});

HTTP 2.0 的问题:TCP 层的队头阻塞。丢包时整个 TCP 连接都要等待重传。

HTTP 3.0 (QUIC)

基于 UDP 的 QUIC 协议,彻底解决队头阻塞:

┌─────────────────────────────────────┐
│              QUIC                   │
├─────────────────────────────────────┤
│  Stream 1: ████░████  (丢包重传)    │
│  Stream 2: ██████████  (不受影响)   │
│  Stream 3: ██████████  (不受影响)   │
└─────────────────────────────────────┘

主要改进

特性              HTTP/2 (TCP)         HTTP/3 (QUIC)
─────────────────────────────────────────────────────
连接建立          TCP + TLS (2-3 RTT)   0-1 RTT
队头阻塞          TCP 层存在            完全解决
连接迁移          IP 变化需重连         支持 (Connection ID)
加密              TLS 可选              内置 TLS 1.3

版本对比总结

特性1.01.12.03.0
连接方式短连接长连接多路复用多路复用
传输协议TCPTCPTCPQUIC (UDP)
头部压缩HPACKQPACK
Server Push
队头阻塞严重HTTP 层TCP 层

关键点

  • HTTP 1.1 的长连接复用 TCP 连接,但请求仍需排队
  • HTTP 2.0 的多路复用允许并行请求,但 TCP 丢包会阻塞所有流
  • HTTP 2.0 的 HPACK 头部压缩通过静态表 + 动态表 + 哈夫曼编码实现
  • HTTP 3.0 用 QUIC 替换 TCP,每个流独立,丢包不影响其他流
  • QUIC 内置 TLS 1.3,支持 0-RTT 快速连接和连接迁移