現在瀏覽器里面很大一部分網頁還在使用HTTP1.1作為主要的網絡通信協議。 但,這傻逼協議是1999年弄出來的. 距今已經有xx年了, 這些年里,美國的IETF 覺得這樣不行.我得出來拯救世界了, 在Chrome的倡導下, 借用Chrome的SPDY 來做為HTTP2的前身,即, HTTP2 是SPDY/3 draft的優優化版.

那,HTTP2 為什么要出現,又解決了HTTP1.1不能解決的什么事情呢？

簡而言之就是

H2是一個二進制協議而,H1是超文本協議.傳輸的內容都不是一樣的

H2遵循多路復用即,代替同一host下的內容,只建立一次連接. H1不是(傻逼)

H2可以使用HPACK進行頭部的壓縮,H1則不論什么請求都會發送

H2允許服務器,預先將網頁所需要的資源PUSH到瀏覽器的內存當中.

接下來,我們來看看,H2到底有哪些具體的feature

首先介紹一下,HTTP2為什么是一種二進制的協議.

說道H2的二進制,首先得介紹一下H1的超文本協議.HTTP1.1每次在發送請求時,都需要找出 開頭和結尾的每一幀的位置, 并且,在寫入的時候,還需要刪除多余的空格,以及選擇最優的方式寫入, 并且如果是HTTP+TLS的話,那性能損耗就比較呵呵了,因為TLS本身的握手協議,以及加密的方式,在一定程度上會對文本信息的內容進行處理等等. 這些無疑都給HTTP1.1的速度造成了極大的影響.所以,HTTP2 不采用這種方式來,而,干脆直接使用二進制. 那,H2是怎樣實現,二進制傳輸呢？
這里,借Grigorik在velocity 會議上的PPT,來看一看.

沒錯,H2是安放在應用層的協議,在接受服務器發送的來的請求時,自動將Header 和 Body部分區分開.

在H1中,當發送多個請求時, 會有一種head-of-line blocking現象. 也就是我們經常看見的瀑布流式的加載方式,這樣的加載方式,只能讓資源按照順序一個一個的加載。 有可能造成如下圖的現象:

前面一個資源內容超級多,并且都是一次性加載完,即使后面有更重要的資源,也需要進行等待.
但在,H2中就沒有這樣的限制了. 他直接會將不同的資源,分拆為細小的二進制幀來進行傳輸.

當然,你也沒必要擔心,每一次是否會傳輸錯誤,因為實際上每一幀里面的格式為:

在傳輸的每一幀里面,會有如下屬性來進行表示Length, Type, Flags, Stream Identifier, and frame payload.

這個特性是建立在二進制傳輸的多路復用(multiplexed)的機制上的. 簡而言之就是一句話:

一個域只需要一個TCP連接

因為在H1的時候,雖然有Connection:keep-alive的特性可以讓你的TCP斷開的稍微晚一點. 但這并沒有什么x用,因為,H1天生自帶max-connections數, 沒辦法, 為了加快更多的資源,你只有多開幾個域名來進行連接,這樣一方面是域名成本的花銷,還有一方面是維護量太大。這就是著名的 Domain Sharding. 不過,這一切在H2中,都變得特別的SB。。。以為,H2本身就可以實現,一個TCP, 資源無上限的特點.
最顯而易見的特性就是: akamai HTTP2的demo.

前面那一坨綠色的就是HTTP1.1寫一下的資源請求,可以看到最多有8個,在紅線后面是HTTP2請求的資源數.最多(沒有最多) 就一個... 這足以體現HTTP1.1的傻逼特性了。。。
那他實際上,是怎么做到在一次TCP中,進行多個資源的請求呢？
參考NewCircle Training 講解的multiplexed video.
我們以前發送HTTP1.1的情況是:

在HTTP2中,我們請求的方式改變為:

有同學可能會問: 他這樣將多個內容放在一個stream里面進行傳輸,是怎樣保證資源的有序性呢？
問得好!
HTTP2這個特性確實是建立在stream基礎上的, 上面已經提到過,HTTP2將資源劃分為最小的frame進行傳輸,這樣可以達到interleave和priority的效果. 每一個frame里面如下圖所示:

為了保證order和priority的feature, 所以,HTTP2在每次發送時,需要額外附帶上一些信息:

a unique stream ID

different priority

當然除了這些基本的優化外,HTTP2在HEADER方面的優化也是下血本的.

HEADER的優化,主要還是由于HTTP1.1的頭部機制--在每次請求時,都需要將一大堆頭部帶上,甚至帶上cookie這灰常大的內容. 所以,SPDY 覺得這樣不行,然后就是用了GZIP的壓縮方式,但這樣很容易的就被破解并且劫持,導致安全性問題. HTTP2吸取了這次教訓,決定自己開發一套優化方案,即,因為頭部的更替不是很頻繁,那我就在Server端做個緩存唄,在你這次連接有效的時間里面, client就用重復的發送請求頭了. 這就是HTTP2的HPACK壓縮方式.
HPACK壓縮會經過兩步:

傳輸的value,會經過Huffman coding. 一遍來節省資源.

為了server和client同步, 兩邊都需要保留一份Header list, 并且,每次發送請求時,都會檢查更新

ok, 那這樣就有一個問題, 第一次的請求,肯定是最慢的.因為他所有的list都需要進行一份初始化操作. 但這是真沒辦法。。。 如果你靠猜Header的方式進行發送的話,就有可能造成相應錯誤的情況. 我們在具體細分一下list, 實際上,每一個list里面還分為static list 和 dynamic list. 兩者的區別具體就是:

static: 主要用來存儲common header. 比如 method,path等

dynamic: 主要用來存儲自定義的協議頭. 比如: custom-name,custom-method等

整個流程,就可以用下圖來進行表述:

可以看到,req/res的Header都會存在同一份表里面,這樣做可能有點傷內存,不過,速度上還是非常棒的。

這里,還有幾個額外的點需要提及一下:

所有頭的協議在HTTP2中都沒有發生改變, 緩存還是 cache-control, etag,last-modifier

response Header 全部是小寫.比如 server,status.

request Header 也是全部是小寫,不過有幾個特殊情況. :method, :scheme, :authority, and :path這幾個基本的頭前面需要:作為pseudo-header fields.

前面說過了,HTTP2的每一幀上帶有一定的相關信息,比如說權重--priority. 另外還有一個叫做依賴--dependence. 即, 假如某個client想要請求 index.html的資源,那么server會一并返回index.js和index.css的資源回去. 減少client發送更多的請求,相當于一種Server Push的技術,和現在的SSE挺像的.
想要實現這個feature,有兩個基本的標準:

每個stream需要有一個1~256的數字來表示權重

每個stream都應該清晰的標明他的依賴有哪些

實際的一個圖就是這樣:

我們就按照上圖的情況來說明吧. 如果一個C資源依賴于D資源,那么D則作為C的父節點. 然后按照這樣的順序繼續排下去.
如果存在在一個根節點下面存在兩個節點,比如第一個A,B。 那應該怎么分呢？ 這時候,就用到上文提到的priority. 主要A和B上面的數字. A-12，B-4. 將網絡資源--實際上就是帶寬和CPU,化成一塊蛋糕,那么,在此時,A可以分到3/4的資源,而B只能分到1/4的資源. 分配 ( allocation ) 好了之后,則便返回數據.( Ps: 在HTTP2中,分數不分數這并不重要,因為HTTP2傳的是二進制,所以,資源不完整是肯定的.只是說,那些文件傳的快一些.)
我們這里就按照第三個圖來進行解釋一下吧:

首先D占用100%的資源進行發送

D發送完了C同樣占用100%的資源進行發送

這里,由于A占3/4而B只占1/4所以,資源按照權重進行分配,然后繼續發送文件直到結束

這個機制算是 HTTP2 第二大 feature , 即, one-to-many 的機制去請求資源.因為考慮到以前,前端請求資源是通過 document 的解析來實現資源的 fetch . 這種方式有點傻逼... 就是,我知道這個資源是需要加載的,但是我不能一開始在一次請求中發給你,我需要等你要,我才給. 這樣,就造成了一種溝通上的麻煩.所以, HTTP2 為了解決這個 bug , 決定開發出一套,可以實現 Server Push 資源的機制.

這里,我們之請求了 page.html ,但實際上通過 push promise. server 自動 push 給我們了 script.js 和 style.css 兩個文件. 這樣就省去的兩個 request 的開銷.
這種方式,也就是我們經常看到的 inlining css 和 inlining script. 不過, 使用 HTTP2 這種機制的話,有一下幾個優于 inlining 的特點:

push 的資源能夠緩存在瀏覽器中

不同的網頁能夠使用該緩存,而不用重新發起

push 的資源是通過 multiplexed 進行傳輸的

push 的資源能夠進行 priority 標識

client 有權取消push 資源的加載

push 的資源必須同域

上面具體的介紹了,關于HTTP2具體的feature. 可以說,上面都是一些理論上的東西,沒有涉及到一些具體的實操. 不過,一旦你深入過后,你就會發現,實操都是在理論相對完善的時候才做的. 都是一些工程化上的內容, 記一下就ok了. 所以,這里,我們繼續深入的看一下具體的HTTP2的協議--frame的內容

先看一張圖吧:

這和上面那張圖的內容一樣,只是更加清楚了。HTTP2 就是憑借他來進行所有的信息交流的,地位差不多和TCP的 frame內容一樣的. HTTP2通過設定了length,type,Flags,R,Stream Identifier來標識一個frame. 這些一共占用了9B的大小. 具體的為:

用24-bit 的大小來表示 Length --該 frame 承載數據量的多少, 最多可以放2^24B （~16MB） 大小. 但在具體實踐中,一般的上線設置為 16KB。 當然,你也可以手動進行修改.不過,這樣就不能體現小文件,流式傳輸的特點

8-bit 的 type字段 用來表示該frame的類型

8-bit 的 Flags 字段用來表明,該次 frame 包括哪些 type

1-bit 的 R 就是個保留字段,永遠設置為0. 實際 沒啥用

31-bit 的 identifier 來表明該stream的unique ID.很有用,該 flag 就是用來確保有序性的 flag.

根據 HTTP2 官方的解釋說, 俺這樣的安排其實很有深意的,你知道我為什么會把Length放在開頭嗎？ 就是為了讓 parser 解析的更快, 因為當 parser 開始解析時, 首先就知道了,你這次會傳多大的 frame, 并且也知道了你的 type , 那么其他的我就把該 frame 分給特定的引擎進行解析就可以了. 然后我就 skip 一下,調到一下一個 frame 繼續解析. 然后, 完成最終的數據接受.

既然, 不同的 type 能夠被不同的引擎所解析,那么 type一共有多少種呢？
懶得數了...就直接說吧.(從上到下 重要性降低哈~)

DATA: 相當于 message body內容. 即, 返回的響應體內容

HEADERS: 就是 相應頭唄...

PRIORITY: 和前面內容提到的 priority 一樣, 用來標識該次 frame 的優先順序.

RST_STREAM: 用來結束該資源的 signal

PUSH_PROMISE: 這個就比較重要了. 這個上文所說的 server PUSH 有很大的關系. 該是用來設置 server 自己發送的相關資源的 flag.

SETTINGS: 用來設置 client 和 server 之間 connection 的 相關配置

GOAWAY : 用來告訴 server , 停止發送相關資源

CONTINUATION: 和 GOWAY 相反,繼續發送相關資源

WINDOW_UPDATE: 使用 flow control 對流進行控制.

HTTP2 同樣是建立在 TCP 連接上的, 他同樣也需要發送請求,并且獲得響應. 那他第一次發送的內容到底是什么呢？
是資源請求嗎？ HTML？ JS ？ CSS ？
actually, No~
HTTP2 在第一次請求的過程當中,發送的內容實際是 HEADERS,因為需要在兩端建立一個 virtually list 來存儲頭部,進行HPACK 壓縮. 如下圖:

請仔細查看他的 Type 可以發現,就是一個 HEADERS。 這也就是上面所說的存儲兩個不同的 header table -- static table && dynamic table.

另外, 還有一個點需要補充一下,就是, client 和 server 為了防止 stream ID 的重復, 做了一個規定: client-initiated stream 只能為奇數 stream-ID, 而 server-initiated stream 只能為偶數的 stream-ID.

首先一個協議的出現, 必定是 >=2 之間的溝通. 那針對于 HTTP2 就是 server 和 browser 之間的通信協議. 所以, 這就要求, HTTP2 的成功實踐, 不僅僅 server 支持, 你的瀏覽器也必須支持才行. 不過,就目前來說, 已經很不錯了: can i use

在 Server 端, 支持 http2 其實,要求也很簡單:

nginx 版本 >1.10

openssl >1.0.2h 即可.

有一個自己的CA證書.

so, 我們先從 CA 證書說起, 這里,先安利一下各大云平臺, 只要你在他那買了一臺服務器, 他那自動回給你提供免費而且正規的 CA 證書, 我的證書就是在騰訊云送的. 一年換一次即可. 這里,我就按 TX(騰訊) 上來說. 當你申請成功時, 他會給你一個 zip 文件. 解壓之后,會得到兩個文件:

證書文件: 1_www.domain.com_cert.crt

私鑰文件: 2_www.domain.com.key

這個兩個文件先放著, 后面有用.
對于, nginx 和 openssl 來說. 一般 server 自帶的版本都是比較低的, 所以, 這里我們采取手動編譯的方式.

# 假設當前目錄在 /usr/local/src
// 下載 1.1.0 openssl
wget -O openssl.tar.gz -c https://www.openssl.org/source/openssl-1.1.0.tar.gz
// 解壓
tar zxf openssl.tar.gz
// 改名
mv openssl-1.1.0/ openssl

// 下載 nginx 1.11.4的源碼
wget -c https://nginx.org/download/nginx-1.11.4.tar.gz
tar zxf nginx-1.11.4.tar.gz
cd nginx-1.11.4/

// 設置編譯過后文件的路徑和啟用的模塊
./configure  --prefix=/usr/local/nginx 
--conf-path=/etc/nginx/nginx.conf 
--with-openssl=../openssl 
--with-http_v2_module 
--with-http_ssl_module 
--with-http_gzip_static_module

// 開始編譯
make && sudo make install

這里, 我直接整理到 gist 里. 可以直接下載下來, 使用 . ./http2.sh 執行即可.

等 nginx 編譯完, 我們進入 /usr/local/nginx/sbin 里面. 將 nginx 軟連接到 /usr/sbin里面.

ln -s /usr/local/nginx/sbin/nginx /usr/sbin/nginx

現在, 我們就可以在全局當中使用 nginx 命令了.

通過上面的配置, 我們接著進到 /etc/nginx/nginx.conf 中. 我直接 paste 配置代碼吧:

# 整體的 nginx 配置
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

events {
    worker_connections 1024;
}

http {
    log_format  main  "$remote_addr - $remote_user [$time_local] "$request" "
                      "$status $body_bytes_sent "$http_referer" "
                      ""$http_user_agent" "$http_x_forwarded_for"";

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_comp_level 5;
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;

    include /etc/nginx/sites-available/*.conf;
}

上面的不多說, 主要內容還在 server 里面. 我這里使用的是 nginx + nodeJS. 所以, 后面有一層 proxy.

server {
    listen 80;
    # 重定向以前的 http協議
    server_name villainhr.com www.villainhr.com;
    return 301 https://www.villainhr.com$request_uri;
}
server {
    listen 443 ssl http2;
    server_name www.villainhr.com;
    root /var/www/myblog/app;
    ssl on;
    # 設置上面給出的證書文件
    ssl_certificate         /etc/nginx/private/1 _www.villainhr.com_cert.crt;
    ssl_certificate_key     /etc/nginx/private/2 _www.villainhr.com.key;
    # 設置 ssl 連接屬性
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    # 設置 ciphers 套件
    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_prefer_server_ciphers on;

    add_header Strict-Transport-Security max-age=15768000;

    ssl_stapling on;
    ssl_stapling_verify on;
    location / {
          proxy_pass              http://localhost:8000;
        proxy_set_header        Host $host;
        proxy_set_header        X-Forwarded-Proto $scheme;
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location ~.(js|css|gif|jpg|jpeg|ico|png|bmp|swf|GIF|JPG|JPEG|ICO|PNG|BMP|SWF) $ {
        root /
          root /var/www/myblog/app/public;
          expires 2d;
          add_header  Cache-Control "no-cache";
          add_header  Pragma no-cache;
          log_not_found off;
    }
}

然后, 使用 nginx 直接運行. 如果上面順利的話, 你的 http2 server 也就大功告成了.
如果, 上面有配置錯誤神馬的. 不放心,可以直接去 mozilla 上面套一個.