布鲁斯前端面试题目 - HTTP/1 vs HTTP/2 全面比较

HTTP/1.x 与 HTTP/2 主要区别

HTTP/2相比HTTP/1.x带来了许多重大改进，让网页加载更快、更有效率:

多路复用: HTTP/2的核心革新

多路复用(Multiplexing)是HTTP/2最重要的革新，解决了HTTP/1.x的队头阻塞问题:

HTTP/1.1:
時間 →
連接1: [---請求A---][---請求C---][---請求E---]
連接2: [---請求B---][---請求D---][---請求F---]
      (需要多個TCP連接並行處理，每個連接內請求串行)

HTTP/2:
時間 →
單一連接: [--A--][--B--][--C--][--D--][--E--][--F--]
          (單一連接內同時處理多個請求，無需等待前序請求完成)

HTTP/2的多路复用优势，以Chrome浏览器为例:

• 1. 打开Chrome开发者工具，你会看到HTTP/2网站只用一条连接就能同时下载多个文件，不再出现排队等待
• 2. 网页加载更快，因为Chrome不需要反复建立多个连接（在Network面板可明显看到连接数减少）
• 3. 即使是在4G网络下，页面也能更快显示，因为资源下载不再互相卡住
• 4. 开发者不再需要把资源分散到多个子网域（如static1.example.com, static2.example.com）来增加连接数
• 5. 当你开很多分页时，Chrome耗用的系统资源更少，因为维护的连接数大幅减少

头部压缩大幅降低传输体积

想象你每天寄10封信给同一个朋友，每次都要重复写相同的寄件人、收件人地址。HTTP/1.1就是这样，每次请求都要重复发送相同的头部信息:

// HTTP/1.1 每次請求都像重新填寫完整表格
GET /首頁.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (...)
Accept: text/html,application/xhtml+xml,...
Cookie: 用戶ID=123; 登入狀態=已登入
// 總共傳送: 約500字節

GET /圖片.jpg HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (...)
Accept: text/html,application/xhtml+xml,...
Cookie: 用戶ID=123; 登入狀態=已登入
// 又重複傳送: 約500字節

而HTTP/2就像是聪明的邮差:

// HTTP/2 只需告知變化部分
[第一次請求]
表格索引=1: example.com
表格索引=2: Mozilla/5.0 (...)
表格索引=3: 用戶ID=123; 登入狀態=已登入
請求: /首頁.html
// 總共傳送: 約500字節

[後續請求]
使用表格索引1,2,3
請求: /圖片.jpg
// 只需傳送: 約20字節

实际效果：打开Chrome开发者工具，你会发现HTTP/2网站的请求头部大小只有HTTP/1.1的约20%，一个有50个请求的网页可能节省20KB以上的数据传输，在手机网络下能明显加快页面加载速度。

服务器推送(Server Push)提前交付资源

HTTP/2的服务器推送就像是餐厅服务生不只送你点的主餐，还主动帮你带来了饮料和甜点：

Server Push适合这些场景:

• 1. 首页必需的CSS和JS (就像餐厅知道主餐一定需要餐具)
• 2. 几乎所有用户都会看到的图片 (就像饭店知道客人一定需要水)
• 3. 用户很可能马上点击的下一页 (就像服务生预测你可能想要甜点)

虽然Server Push听起来很棒，但实际使用时也有一些小问题，比如可能推送了用户已有的资源，或者推送了用户不需要的东西，就像服务生给你带了你已有的饮料，或者你不想吃的甜点。

二进制协议提高解析效率

HTTP/1.x使用纯文本格式，就像写信一样；而HTTP/2采用二进制格式，更像是用电报传输:

想象一下：HTTP/1.1就像是用自然语言写的信件，邮差需要阅读整封信才能知道送到哪里；而HTTP/2就像是用条码标记的包裹，扫描器一扫就能立即处理。

二进制协议的优势就像从手写信件升级到电子邮件:

• 1. 解析更高效 - 就像扫描条码比阅读地址快得多
• 2. 更紧凑 - 就像压缩文件比原始文件占用更少空间
• 3. 错误检测更可靠 - 就像包裹上的追踪号码，知道每个部分应该有多大
• 4. 更易于实现多路复用 - 就像高速公路的多车道，不同车辆可以同时前进

🔥 常见面试题目

一条马路只能一辆车通过
---------------------→
  🚗
---------------------→
       🚚
---------------------→
            🚌

一条马路多车道同时通行
---------------------→
  🚗    🚚    🚌
=====================→

客户端: 我要HTML
服务器: 给你HTML
客户端: 我还要CSS
服务器: 给你CSS
客户端: 我还要JS
服务器: 给你JS

客户端: 我要HTML
服务器: 给你HTML
        顺便给你CSS和JS
        (我知道你会需要)