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

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

簡而言之就是

H2是一個二進(jìn)制協(xié)議而,H1是超文本協(xié)議.傳輸?shù)膬?nèi)容都不是一樣的

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

H2可以使用HPACK進(jìn)行頭部的壓縮,H1則不論什么請求都會發(fā)送

H2允許服務(wù)器,預(yù)先將網(wǎng)頁所需要的資源PUSH到瀏覽器的內(nèi)存當(dāng)中.

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

首先介紹一下,HTTP2為什么是一種二進(jìn)制的協(xié)議.

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

沒錯,H2是安放在應(yīng)用層的協(xié)議,在接受服務(wù)器發(fā)送的來的請求時,自動將Header 和 Body部分區(qū)分開.

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

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

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

在傳輸?shù)拿恳粠锩?會有如下屬性來進(jìn)行表示Length, Type, Flags, Stream Identifier, and frame payload.

這個特性是建立在二進(jìn)制傳輸?shù)亩嗦窂?fù)用(multiplexed)的機(jī)制上的. 簡而言之就是一句話:

一個域只需要一個TCP連接

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

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

在HTTP2中,我們請求的方式改變?yōu)?

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

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

a unique stream ID

different priority

當(dāng)然除了這些基本的優(yōu)化外,HTTP2在HEADER方面的優(yōu)化也是下血本的.

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

傳輸?shù)膙alue,會經(jīng)過Huffman coding. 一遍來節(jié)省資源.

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

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

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

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

整個流程,就可以用下圖來進(jìn)行表述:

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

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

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

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

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

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

每個stream需要有一個1~256的數(shù)字來表示權(quán)重

每個stream都應(yīng)該清晰的標(biāo)明他的依賴有哪些

實際的一個圖就是這樣:

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

首先D占用100%的資源進(jìn)行發(fā)送

D發(fā)送完了C同樣占用100%的資源進(jìn)行發(fā)送

這里,由于A占3/4而B只占1/4所以,資源按照權(quán)重進(jìn)行分配,然后繼續(xù)發(fā)送文件直到結(jié)束

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

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

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

不同的網(wǎng)頁能夠使用該緩存,而不用重新發(fā)起

push 的資源是通過 multiplexed 進(jìn)行傳輸?shù)?/p>

push 的資源能夠進(jìn)行 priority 標(biāo)識

client 有權(quán)取消push 資源的加載

push 的資源必須同域

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

先看一張圖吧:

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

用24-bit 的大小來表示 Length --該 frame 承載數(shù)據(jù)量的多少, 最多可以放2^24B （~16MB） 大小. 但在具體實踐中,一般的上線設(shè)置為 16KB。 當(dāng)然,你也可以手動進(jìn)行修改.不過,這樣就不能體現(xiàn)小文件,流式傳輸?shù)奶攸c

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

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

1-bit 的 R 就是個保留字段,永遠(yuǎn)設(shè)置為0. 實際 沒啥用

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

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

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

DATA: 相當(dāng)于 message body內(nèi)容. 即, 返回的響應(yīng)體內(nèi)容

HEADERS: 就是 相應(yīng)頭唄...

PRIORITY: 和前面內(nèi)容提到的 priority 一樣, 用來標(biāo)識該次 frame 的優(yōu)先順序.

RST_STREAM: 用來結(jié)束該資源的 signal

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

SETTINGS: 用來設(shè)置 client 和 server 之間 connection 的 相關(guān)配置

GOAWAY : 用來告訴 server , 停止發(fā)送相關(guān)資源

CONTINUATION: 和 GOWAY 相反,繼續(xù)發(fā)送相關(guān)資源

WINDOW_UPDATE: 使用 flow control 對流進(jìn)行控制.

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

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

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

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

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

nginx 版本 >1.10

openssl >1.0.2h 即可.

有一個自己的CA證書.

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

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

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

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

# 假設(shè)當(dāng)前目錄在 /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/

// 設(shè)置編譯過后文件的路徑和啟用的模塊
./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 執(zhí)行即可.

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

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

現(xiàn)在, 我們就可以在全局當(dāng)中使用 nginx 命令了.

通過上面的配置, 我們接著進(jìn)到 /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;
}

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

server {
    listen 80;
    # 重定向以前的 http協(xié)議
    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;
    # 設(shè)置上面給出的證書文件
    ssl_certificate         /etc/nginx/private/1 _www.villainhr.com_cert.crt;
    ssl_certificate_key     /etc/nginx/private/2 _www.villainhr.com.key;
    # 設(shè)置 ssl 連接屬性
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    # 設(shè)置 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 直接運(yùn)行. 如果上面順利的話, 你的 http2 server 也就大功告成了.
如果, 上面有配置錯誤神馬的. 不放心,可以直接去 mozilla 上面套一個.