布魯斯前端面試題目 - 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
        (我知道你會需要)