Client | Browser | Web Server | nginx | 原理
Intro
相較於 HTTP 1.1,主要解決 HOL (head-of-line) blocking 應用層問題,Frame 編碼改用 Binary,Header 另外採用 HPACK 壓縮
HTTP/1.1 vs. HTTP/2 比較
| 特性 | HTTP/1.1 (Keep-Alive) | HTTP/2 (Multiplexing) | 微服務場景優化 |
|---|---|---|---|
| 傳輸格式 | 純文本 (Plain Text) 解析效率較低,且容易有格式歧義 |
二進制分幀 (Binary Frame) 解析速度快、結構嚴謹且節省頻寬 |
減少 Sidecar (如 Envoy) 解析封包的 CPU 負載 |
| 併發機制 | 序列執行 (Pipelining 受限, 存在 HOL Blocking) |
多路複用 (Multiplexing) 單條連線可並行處理多個 Request |
極致利用單一連線:徹底解決應用層阻塞,並大幅減少 mTLS 握手次數 |
| 標頭優化 | 無壓縮 每次傳送都帶完整的冗餘 Header |
HPACK 壓縮 靜態/動態索引表 + Huffman Coding |
微服務間頻繁傳遞的 Token 與 Tracing ID 體積縮減 85% 以上 |
| 伺服器主動權 | 被動響應 必須由客戶端發起請求 |
伺服器推送 (Server Push) 伺服器可主動推送資源 |
提升資源預加載效率 (在特定異步通知場景具潛力) |

(Reference: https://bytebytego.com/guides/what-makes-http2-faster-than-http1/)
Client 測試方法
CURL
首先可以檢查CURL是否支援HTTP2:
$ curl --version
...
Features: AsynchDNS IPv6 Largefile GSS-API Kerberos SPNEGO NTLM NTLM_WB SSL libz HTTP2 UnixSockets HTTPS-proxy
CURL --http2
利用CURL的--http2參數指定開啟HTTP/2並用的-I參數回傳Header確認Protocol:
$ curl --http2 -I https://www.google.com
HTTP/2 200
content-type: text/html; charset=ISO-8859-1
Browser Developer Tool
-
Firefox: 預設 Network 的 Header 就會顯示如
Version HTTP/2 -
Chrome: Network 的 Header 中 HTTP 2 反而不會顯示,可以在列表中右鍵點 column 新增 protocol 來辨別如
h2
WebServer HTTP/2
Nginx
確認 Nginx 版本為 1.9.5 以上,直接對 Server listen ssl 設定列多加http2 即可:
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
ssl_certificate server.crt;
ssl_certificate_key server.key;
...
}
修改完成後 nginx -t 確認無誤即可 reload 生效
抓包實測原理
基於 TCP connection 的唯一值是 IP + Port,HTTP 2.0 以前 Browser 遇到同一個 host 多個請求的狀況,通常會同時並行請求達到 multi-threads 效果。HTTP 1.1 Keep-alive 可以再繼續復用這些 connections。
HTTP 2.0 後對同一個 host 只需要一個 TCP connection,在其下雙方可以並行發送與接收 Application Data。