本文目的是學(xué)習(xí)HTTP 2.0的原理并研究其通信的詳細(xì)細(xì)節(jié)。

1. 二進(jìn)制分幀層

二進(jìn)制分幀層，是HTTP 2.0性能增強的核心。
HTTP 1.x在應(yīng)用層以純文本的形式進(jìn)行通信，而HTTP 2.0將所有的傳輸信息分割為更小的消息和幀，并對它們采用二進(jìn)制格式編碼。這樣，客戶端和服務(wù)端都需要引入新的二進(jìn)制編碼和解碼的機制。
如下圖所示，HTTP 2.0并沒有改變HTTP 1.x的語義，只是在應(yīng)用層使用二進(jìn)制分幀方式傳輸。

因此，也引入了新的通信單位：

1.1 幀（frame）

HTTP 2.0通信的最小單位，包括幀首部、流標(biāo)識符、優(yōu)先值和幀凈荷等。

其中，幀類型又可以分為：

DATA：用于傳輸HTTP消息體；
HEADERS：用于傳輸首部字段；
SETTINGS：用于約定客戶端和服務(wù)端的配置數(shù)據(jù)。比如設(shè)置初識的雙向流量控制窗口大小；
WINDOW_UPDATE：用于調(diào)整個別流或個別連接的流量
PRIORITY：用于指定或重新指定引用資源的優(yōu)先級。
RST_STREAM：用于通知流的非正常終止。
PUSH_ PROMISE：服務(wù)端推送許可。
PING：用于計算往返時間，執(zhí)行“ 活性” 檢活。
GOAWAY：用于通知對端停止在當(dāng)前連接中創(chuàng)建流。

標(biāo)志位用于不同的幀類型定義特定的消息標(biāo)志。比如DATA幀就可以使用End Stream: true表示該條消息通信完畢。流標(biāo)識位表示幀所屬的流ID。優(yōu)先值用于HEADERS幀，表示請求優(yōu)先級。R表示保留位。
下面是Wireshark抓包的一個DATA幀：

1.2 消息（message）

消息是指邏輯上的HTTP消息（請求/響應(yīng)）。一系列數(shù)據(jù)幀組成了一個完整的消息。比如一系列DATA幀和一個HEADERS幀組成了請求消息。

1.3 流（stream）

流是連接中的一個虛擬信道，可以承載雙向消息傳輸。每個流有唯一整數(shù)標(biāo)識符。為了防止兩端流ID沖突，客戶端發(fā)起的流具有奇數(shù)ID，服務(wù)器端發(fā)起的流具有偶數(shù)ID。
所有HTTP 2. 0 通信都在一個TCP連接上完成，這個連接可以承載任意數(shù)量的雙向數(shù)據(jù)流Stream。相應(yīng)地，每個數(shù)據(jù)流以消息的形式發(fā)送，而消息由一或多個幀組成， 這些幀可以亂序發(fā)送，然后根據(jù)每個幀首部的流標(biāo)識符重新組裝。

二進(jìn)制分幀層保留了HTTP的語義不受影響，包括首部、方法等，在應(yīng)用層來看，和HTTP 1.x沒有差別。同時，所有同主機的通信能夠在一個TCP連接上完成。

2. 多路復(fù)用共享連接

基于二進(jìn)制分幀層，HTTP 2.0可以在共享TCP連接的基礎(chǔ)上，同時發(fā)送請求和響應(yīng)。HTTP消息被分解為獨立的幀，而不破壞消息本身的語義，交錯發(fā)送出去，最后在另一端根據(jù)流ID和首部將它們重新組合起來。
我們來對比下HTTP 1.x和HTTP 2.0，假設(shè)不考慮1.x的pipeline機制，雙方四層都是一個TCP連接。客戶端向服務(wù)度發(fā)起三個圖片請求/image1.jpg，/image2.jpg，/image3.jpg。
HTTP 1.x發(fā)起請求是串行的，image1返回后才能再發(fā)起image2，image2返回后才能再發(fā)起image3。

HTTP 2.0建立一條TCP連接后，并行傳輸著3個數(shù)據(jù)流，客戶端向服務(wù)端亂序發(fā)送stream1~3的一系列的DATA幀，與此同時，服務(wù)端已經(jīng)在返回stream 1的DATA幀

性能對比，高下立見。HTTP 2.0成功解決了HTTP 1.x的隊首阻塞問題（TCP層的阻塞仍無法解決），同時，也不需要通過pipeline機制多條TCP連接來實現(xiàn)并行請求與響應(yīng)。減少了TCP連接數(shù)對服務(wù)器性能也有很大的提升。

3. 請求優(yōu)先級

流可以帶有一個31bit的優(yōu)先級：

0：表示最高優(yōu)先級
231-1：表示最低優(yōu)先級

客戶端明確指定優(yōu)先級，服務(wù)端可以根據(jù)這個優(yōu)先級作為依據(jù)交互數(shù)據(jù)，比如客戶端優(yōu)先級設(shè)置為.css>.js>.jpg（具體可參見《高性能網(wǎng)站建設(shè)指南》），服務(wù)端按優(yōu)先級返回結(jié)果有利于高效利用底層連接，提高用戶體驗。
然而，也不能過分迷信請求優(yōu)先級，仍然要注意以下問題：

服務(wù)端是否支持請求優(yōu)先級
會否引起隊首阻塞問題，比如高優(yōu)先級的慢響應(yīng)請求會阻塞其他資源的交互。

4. 服務(wù)端推送

HTTP 2.0增加了服務(wù)端推送功能，服務(wù)端可以根據(jù)客戶端的請求，提前返回多個響應(yīng)，推送額外的資源給客戶端。如下圖所示，客戶端請求stream 1，/page.html。服務(wù)端在返回stream 1消息的同時推送了stream 2（/script.js）和stream 4（/style.css）。

PUSH_PROMISE幀是服務(wù)端向客戶端有意推送資源的信號。

如果客戶端不需要服務(wù)端Push，可在SETTINGS幀中設(shè)定服務(wù)端流的值為0，禁用此功能
PUSH_PROMISE幀中只包含預(yù)推送資源的首部。如果客戶端對PUSH_PROMISE幀沒有意見，服務(wù)端在PUSH_PROMISE幀后發(fā)送響應(yīng)的DATA幀開始推送資源。如果客戶端已經(jīng)緩存該資源，不需要再推送，可以選擇拒絕PUSH_PROMISE幀。
PUSH_PROMISE必須遵循請求-響應(yīng)原則，只能借著對請求的響應(yīng)推送資源。
目前，Apache的mod_http2能夠開啟 H2Push on服務(wù)端推送Push。Nginx的ngx_http_v2_module還不支持服務(wù)端Push。

Apache mod_headers example
<Location /index.html>
    Header add Link "</css/site.css>;rel=preload"
    Header add Link "</images/logo.jpg>;rel=preload"
</Location>12345

5. 首部壓縮

HTTP 1.x每一次通信（請求/響應(yīng)）都會攜帶首部信息用于描述資源屬性。HTTP 2.0在客戶端和服務(wù)端之間使用“首部表”來跟蹤和存儲之前發(fā)送的鍵-值對。首部表在連接過程中始終存在，新增的鍵-值對會更新到表尾，因此，不需要每次通信都需要再攜帶首部。

另外，HTTP 2.0使用了首部壓縮技術(shù)，壓縮算法使用HPACK。可讓報頭更緊湊，更快速傳輸，有利于移動網(wǎng)絡(luò)環(huán)境。
需要注意的是，HTTP 2.0關(guān)注的是首部壓縮，而我們常用的gzip等是報文內(nèi)容（body）的壓縮。二者不僅不沖突，且能夠一起達(dá)到更好的壓縮效果。

6. 一個完整的HTTP 2.0通信過程

考慮一個問題，客戶端如何知道服務(wù)端是否支持HTTP 2.0？是否支持對二進(jìn)制分幀層的編碼和解碼？所以，在兩端使用HTTP 2.0通信之前，必然存在協(xié)議協(xié)商的過程。

6.1 基于ALPN的協(xié)商過程

支持HTTP 2.0的瀏覽器可以在TLS會話層自發(fā)完成和服務(wù)端的協(xié)議協(xié)商以確定是否使用HTTP 2.0通信。其原理是TLS 1.2中引入了擴展字段，以允許協(xié)議的擴展，其中ALPN協(xié)議（Application Layer Protocol Negotiation, 應(yīng)用層協(xié)議協(xié)商, 前身是NPN）用于客戶端和服務(wù)端的協(xié)議協(xié)商過程。
服務(wù)端使用ALPN，監(jiān)聽443端口默認(rèn)提高HTTP 1.1，并允許協(xié)商其他協(xié)議，比如SPDY和HTTP 2.0。
比如，客戶端在TLS握手Client Hello階段表明自身支持HTTP 2.0

服務(wù)端收到后，響應(yīng)Server Hello，表示自己也支持HTTP 2.0。雙方開始HTTP 2.0通信。

6.2 基于HTTP的協(xié)商過程

然而，HTTP 2.0一定是HTTPS（TLS 1.2）的特權(quán)嗎？
當(dāng)然不是，客戶端使用HTTP也可以開啟HTTP 2.0通信。只不過因為HTTP 1. 0和HTTP 2. 0都使用同一個端口（80），又沒有服務(wù)器是否支持HTTP 2. 0的其他任何信息，此時客戶端只能使用HTTP Upgrade機制（OkHttp, nghttp2等組件均可實現(xiàn)，也可以自己編碼完成）通過協(xié)調(diào)確定適當(dāng)?shù)膮f(xié)議：

HTTP Upgrade request
GET / HTTP/1.1
host: nghttp2.org
connection: Upgrade, HTTP2-Settings
upgrade: h2c        /*發(fā)起帶有HTTP2.0 Upgrade頭部的請求*/       
http2-settings: AAMAAABkAAQAAP__   /*客戶端SETTINGS凈荷*/
user-agent: nghttp2/1.9.0-DEV

HTTP Upgrade response    
HTTP/1.1 101 Switching Protocols   /*服務(wù)端同意升級到HTTP 2.0*/
Connection: Upgrade
Upgrade: h2c

HTTP Upgrade success               /*協(xié)商完成*/1234567891011121314

6.3 完整通信過程

TCP連接建立：

TLS握手和HTTP 2.0通信過程：

另外，在chrome中通過chrome://net-internals/#http2命令也能捕獲HTTP 2.0通信過程：

42072: HTTP2_SESSION
textlink.simba.taobao.com:443 (PROXY 10.19.110.55:8080)
Start Time: 2017-04-05 11:39:11.459

t=370225 [st=    0] +HTTP2_SESSION  [dt=32475+]
                     --> host = "textlink.simba.taobao.com:443"
                     --> proxy = "PROXY 10.19.110.55:8080"
t=370225 [st=    0]    HTTP2_SESSION_INITIALIZED
                       --> protocol = "h2"
                       --> source_dependency = 42027 (PROXY_CLIENT_SOCKET_WRAPPER)
t=370225 [st=    0]    HTTP2_SESSION_SEND_SETTINGS
                       --> settings = ["[id:3 flags:0 value:1000]","[id:4 flags:0 value:6291456]","[id:1 flags:0 value:65536]"]
t=370225 [st=    0]    HTTP2_STREAM_UPDATE_RECV_WINDOW
                       --> delta = 15663105
                       --> window_size = 15728640
t=370225 [st=    0]    HTTP2_SESSION_SENT_WINDOW_UPDATE_FRAME
                       --> delta = 15663105
                       --> stream_id = 0
t=370225 [st=    0]    HTTP2_SESSION_SEND_HEADERS
                       --> exclusive = true
                       --> fin = true
                       --> has_priority = true
                       --> :method: GET
                           :authority: textlink.simba.taobao.com
                           :scheme: https
                           :path: /?name=tbhs&cna=IAj9EOy3fngCAXBQ5kJ9yusH&nn=&count=13&pid=430266_1006&_ksTS=1491363551394_94&callback=jsonp95
                           user-agent: Mozilla/5.0 (windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
                           accept: */*
                           referer: https://www.taobao.com/
                           accept-encoding: gzip, deflate, sdch, br
                           accept-language: zh-CN,zh;q=0.8
                           cookie: [382 bytes were stripped]
                       --> parent_stream_id = 0
                       --> stream_id = 1
                       --> weight = 147
t=370256 [st=   31]    HTTP2_SESSION_RECV_SETTINGS
                       --> host = "textlink.simba.taobao.com:443"
t=370256 [st=   31]    HTTP2_SESSION_RECV_SETTING
                       --> flags = 0
                       --> id = 3
                       --> value = 128
t=370256 [st=   31]    HTTP2_SESSION_UPDATE_STREAMS_SEND_WINDOW_SIZE
                       --> delta_window_size = 2147418112
t=370256 [st=   31]    HTTP2_SESSION_RECV_SETTING
                       --> flags = 0
                       --> id = 4
                       --> value = 2147483647
t=370256 [st=   31]    HTTP2_SESSION_RECV_SETTING
                       --> flags = 0
                       --> id = 5
                       --> value = 16777215
t=370256 [st=   31]    HTTP2_SESSION_RECEIVED_WINDOW_UPDATE_FRAME
                       --> delta = 2147418112
                       --> stream_id = 0
t=370256 [st=   31]    HTTP2_SESSION_UPDATE_SEND_WINDOW
                       --> delta = 2147418112
                       --> window_size = 2147483647
t=370261 [st=   36]    HTTP2_SESSION_RECV_HEADERS
                       --> fin = false
                       --> :status: 200
                           date: Wed, 05 Apr 2017 03:39:11 GMT
                           content-type: text/html; charset=ISO-8859-1
                           vary: Accept-Encoding
                           server: Tengine
                           expires: Wed, 05 Apr 2017 03:39:11 GMT
                           cache-control: max-age=0
                           strict-transport-security: max-age=0
                           timing-allow-origin: *
                           content-encoding: gzip
                       --> stream_id = 1
t=370261 [st=   36]    HTTP2_SESSION_RECV_DATA
                       --> fin = false
                       --> size = 58
                       --> stream_id = 1
t=370261 [st=   36]    HTTP2_SESSION_UPDATE_RECV_WINDOW
                       --> delta = -58
                       --> window_size = 15728582
t=370261 [st=   36]    HTTP2_SESSION_RECV_DATA
                       --> fin = true
                       --> size = 0
                       --> stream_id = 1
t=370295 [st=   70]    HTTP2_STREAM_UPDATE_RECV_WINDOW
                       --> delta = 58
                       --> window_size = 15728640
t=402700 [st=32475]