HTTP2試用小記

原文：https://www.clarencep.com/2016/11/17/upgrade-nginx-to-support-http2/

 

這兩天把公司的網站升級到了全站https. 順便瞄到了HTTP2的瀏覽器支持狀況：

支持得還都蠻好的嘛。忍不住試用了一把HTTP2 – 就直接拿本博客來作示例了。

升級nginx

主流瀏覽器基本上都支持了HTTP2，可是nginx只有升級到1.10以上版本才行 – 鄙站以前用的仍是nginx 1.6的某個版本。

更新了下apt-get，發現倉庫中沒有1.10版本 – 囧 – 只好本身編譯吧：

首先，下載nginx和openssl：

1 2 3 4 5 6 7

cd /usr/local/src wget https://nginx.org/download/nginx-1.11.6.tar.gz tar xzf nginx-1.11.6.tar.gz wget https://www.openssl.org/source/openssl-1.1.0c.tar.gz tar xzvf openssl-1.1.0c.tar.gz

而後，編譯nginx：

1 2 3 4 5 6 7 8 9 10 11 12 13

cd nginx-1.11.6 ./configure --prefix=/usr/local/nginx \ --conf-path=/etc/nginx/nginx.conf \ --with-openssl=../openssl-1.1.0c \ --with-http_v2_module \ --with-http_ssl_module \ --with-http_gzip_static_module make && sudo make install # 爲了方便全局執行，則建立個符號連接： sudo ln -s /usr/local/nginx/sbin/nginx /usr/sbin/nginx

接着，就是移植老的配置了，老的配置均可以直接使用，直接拷貝過來便可。
最後，啓用HTTP2 – 目前HTTP2只能和ssl(https)一塊兒使用，只要修改下listen語句便可：

1 2 3 4

# 老的配置： # listen 443; # 新的配置（啓用http2）: listen 443 ssl http2;

別忘了重啓nginx (sudo nginx -s reload).

嘗試經過HTTP2訪問

搞定nginx後，隨手拿個chrome就可使用HTTP2了 – chrome 49及以上版本都支持HTTP2，還好chrome會自動升級，基本不用擔憂chrome太老。

打開F12查看下HTTP頭部，果真Request Headers都不同了：

這些:authority, :method 和 :path 等冒號打頭的就是HTTP2的特徵之一 – 手邊沒有抓包工具，只能這樣粗淺的判斷了。

看看HTTP2的流水：

再比比HTTP1.1的流水：

HTTP2的流水簡潔多了，有沒有！

性能PK

HTTP2的性能通常應該比HTTP1.1的高一些，可是，可不必定喲：

上圖是本博客首頁在相同nginx、相同PC、相同網絡條件下對HTTP2和HTTP1.1分別測試的PK結果。 可見雖然HTTP2的網絡加載時間（Load）比HTTP1.1要短，可是DOM渲染時間（DOMContentLoaded）卻比HTTP1.1要長。。。

多是因爲本博沒有專門爲HTTP2優化所至。也多是瀏覽器渲染沒有爲HTTP2優化的緣故。

最後總結一句：HTTP2入坑要謹慎。