轉(zhuǎn)自地址：https://my.oschina.net/u/861562/blog/1823472
準(zhǔn)備發(fā)車唤冈，帶你體驗速度與激情休弃，我們的熱火瞬間點燃黑夜盅抚。
背景
目前提升H5應(yīng)用加載速度的方式有很多房待，比如緩存怔球、cdn加速嚼酝、代碼壓縮合并和圖片壓縮等技術(shù)。這些方法相信大伙如數(shù)家珍竟坛，然而這些招用完后闽巩，是否還有優(yōu)化空間呢钧舌？現(xiàn)在我們祭出大殺器——HTTP 2.0
相信大家聽說過HTTP 2.0,那么它和HTTP 1.X相比效果到底如何呢？請看療效：
單次頁面加載速度對比
實踐出真知涎跨，有請DEMO先生出場——一個網(wǎng)頁洼冻，加載了8張圖片，圖片大小合計10MB
-
http 1.x：
DOMContentLoaded: 215ms, Load: 549ms
-
http2.0:
DOMContentLoaded:156ms, Load:491ms
從數(shù)據(jù)中大家可以看到隅很，對于這個DEMO頁撞牢，HTTP 1.X需要花費549ms，而使用HTTP 2.0則可以減少60ms左右的等待叔营。
Emmmm……才60ms,貌似沒想像中改善那么大屋彪，60ms用戶應(yīng)該無感吧？
確實對單次用戶訪問來說绒尊，改善不大畜挥，但是用戶瀏覽一個網(wǎng)站，不是一次就結(jié)束了垒酬，他會在接下來的時間里與網(wǎng)站產(chǎn)生多次互動砰嘁。如果每個請求我們都能節(jié)省一點點時間件炉，那么在用戶的多次互動中勘究，累加起來的時間應(yīng)該比較可觀了。
若是在大并發(fā)請求下斟冕，效果又當(dāng)如何呢口糕？上！壓磕蛇！測景描！
壓測數(shù)據(jù)對比
模擬1,000,000 次請求壓測數(shù)據(jù)如下：
http不同協(xié)議請求參數(shù)對比
| 請求協(xié)議類型 | 請求花費時間(s) | 每秒請求數(shù) | 每一請求花費時間 | 交換速率(kb/s) |
| http1.1 | 144.035 | 6942.75 | 0.864 | 7328.87 |
| https-spdy | 128.133 | 7804.36 | 0.769 | 8238.4 |
| https | 145.883 | 6854.82 | 0.875 | 7236.05 |
| https with h2 | 116.13 | 8611.28 | 0.686 | 8140.8 |
從上表可以看到http2.0和http1.1相比，節(jié)省30s左右的時間秀撇，沒有對比沒有傷害超棺。
（壓測方法可見文末附錄二）
網(wǎng)絡(luò)表現(xiàn)不錯，我們再來看看服務(wù)器資源消耗情況呵燕。
cpu 使用情況
我們將相關(guān)數(shù)據(jù)制成了圖表棠绘，方便大家比對
us: 用戶空間占用cpu時間
sy：系統(tǒng)空間占用cpu時間
hi： 硬盤中斷
si： 軟件中斷
http1.1
cpu(us+sy)平均：82.51%
http2.0
cpu(us+sy)平均：63.09%
療效相當(dāng)不錯，看官們是否動心了呢再扭？接下來為你呈上運用之道氧苍。
http 協(xié)議發(fā)展
使用http2.0的必備條件
默認(rèn)https支持http2.0（2015年提出）
瀏覽器支持ALPN
查看是否支持http2.0的三種方法
使用openssl測試
終端輸入：echo | openssl s_client -alpn h2 –connect 域名:443
通過Chrome瀏覽器的屬性查看
輸入框鍵入 chrome://net-internals/#http2
通過Chrome的debug工具查看
protocol為h2
http1.1與http2.0的區(qū)別
| 協(xié)議類型 | 傳輸格式 | 多路復(fù)用 | 報頭壓縮 | 服務(wù)端主動推送 | 請求優(yōu)先級 |
| http1.1 | 文本 | X | X | X | X |
| http2.0 | 二進(jìn)制幀 | √ | √ | √ | √ |
報頭壓縮
通過h2load 命令訪問
多路復(fù)用
http1.1
http1.1 without pipelining: 通過tcp連接上一個請求相應(yīng)完后，下一個請求才能發(fā)出
http1.1 with pipelining: 通過tcp連接泛范，上一個請求發(fā)出让虐，下一個請求不需要等待，但是返回是同一順序罢荡。
HTTP 1.X的網(wǎng)絡(luò)加載情況赡突，同一域名对扶，最多支持6個Tcp連接，加載效果如同“正三角形”麸俘，看得我強(qiáng)迫癥都犯了……
http2.0
在TCP連接上傳輸?shù)氖菐缁蛻舳藭⒁獋鬏數(shù)臄?shù)據(jù)拆分為不同的幀，并標(biāo)記對應(yīng)的數(shù)據(jù)流ID从媚，異步發(fā)出逞泄，服務(wù)端接收到幀集合根據(jù)數(shù)據(jù)流ID拼湊起來即為客戶端發(fā)送來的數(shù)據(jù)。同理拜效，服務(wù)端也是將數(shù)據(jù)拆分為不同幀返回喷众。
每個請求通過tcp連接發(fā)出不需要等待其他請求返回， 所有的數(shù)據(jù)返回沒有順序紧憾。
HTTP 2.0的網(wǎng)絡(luò)加載情況到千，同一時刻，可以發(fā)出30以上的數(shù)據(jù)幀且無序赴穗，感覺很舒服有沒有憔四？？
我們不妨以貨物運輸來再現(xiàn)http1.1與http2.0的請求場景般眉。
A地與C地之間相隔一條河流了赵，貨物運輸需要途徑橋梁。假定現(xiàn)有橫跨A甸赃，C兩地的6座橋梁（類似Chrome同一域名最大支持6個TCP通道）柿汛，以其中一座雙向路線橋梁b1為例，
http1.1的過程：
一輛運輸車輛從A地出發(fā)埠对，通過橋梁b1络断，到達(dá)C地，然而只有在該車輛從C地取貨并返回后项玛，另一輛車才能出發(fā)貌笨。如此有序往返...
http2.0的過程：
所有的車輛無序上橋，取貨后返回襟沮，根據(jù)車輛牌照卸載對應(yīng)取貨物品锥惋。
顯而易見，第二種方式臣嚣，橋梁利用率高净刮，車輛運輸貨物多。
請求優(yōu)先級
http1.1 不支持請求優(yōu)先級硅则，在統(tǒng)一域名大量請求同時發(fā)送時淹父，瀏覽器支持6個請求，由于沒有優(yōu)先級怎虫，加載的時候會出現(xiàn)javascript資源阻塞情況暑认。
http2.0困介， 瀏覽器通過headers和priority攜帶優(yōu)先級信息，服務(wù)器生成優(yōu)先級樹蘸际，指導(dǎo)資源的分配（內(nèi)存座哩，cpu時間，帶寬）粮彤。
優(yōu)先級最高： 主要的html
優(yōu)先級高： CSS文件
優(yōu)先級中： js文件
優(yōu)先級低： 圖片
服務(wù)端主動推送
http1.1：在訪問頁面時根穷，瀏覽器識別html頁面上的link鏈接，然后請求對應(yīng)的資源导坟，瀏覽器開始識別到請求需要一定時間屿良。
http2.0: 在訪問頁面時，服務(wù)器主動推動資源下載惫周，讓瀏覽器直接請求link資源尘惧。
目前nginx1.13.9版本支持push功能
附錄一： nginx安裝配置http2.0
軟件要求
nginx 版本1.9.5以上 nginx 下載頁
openssl 1.0.2以上 openssl 下載頁
安裝過程
<pre style="box-sizing: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; overflow: auto; border-radius: 3px; padding: 2px; line-height: 1.4; word-wrap: normal; display: block; background: rgb(63, 63, 63); color: rgb(220, 220, 220); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">//下載nginx/1.10.3 source包
tar xvgf nginx-1.10.3.tar.gz
cd nginx-1.10.3
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-openssl=/usr/local/openssl-1.0.2h --with-http_v2_module
make -j4
make install</pre>
配置http2.0
listen 443 ssl http2;
<pre style="box-sizing: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; overflow: auto; border-radius: 3px; padding: 2px; line-height: 1.4; word-wrap: normal; display: block; background: rgb(63, 63, 63); color: rgb(220, 220, 220); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">...
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
gzip on;
server {
listen 80;
server_name 172.16.37.66;
location / {
root html;
index index.html index.htm;
}
}
# HTTPS server
#
server {
listen 443 ssl http2;
server_name 172.16.37.66;
ssl_certificate certs/cert.crt;
ssl_certificate_key certs/cert.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
location / {
root html;
index index.html index.htm;
}
}
}</pre>
附錄二：壓測
壓測工具
對于http,https使用apache 的ab
對于http/2使用nghttp2的h2load
壓測http
<pre style="box-sizing: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; overflow: auto; border-radius: 3px; padding: 2px; line-height: 1.4; word-wrap: normal; display: block; background: rgb(63, 63, 63); color: rgb(220, 220, 220); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">ab -k -t 180 -c 6 -n 1000000 http://172.16.37.66/index.html</pre>
壓測http2.0
<pre style="box-sizing: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; overflow: auto; border-radius: 3px; padding: 2px; line-height: 1.4; word-wrap: normal; display: block; background: rgb(63, 63, 63); color: rgb(220, 220, 220); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">h2load -c 6 -T 180 -n 1000000 https://172.16.37.66/index.html</pre>
附錄三：http協(xié)議
定義
Hyper Text Transfer Protocol（超文本傳輸協(xié)議）的縮寫,是用于從萬維網(wǎng)（WWW:World Wide Web ）服務(wù)器傳輸超文本到本地瀏覽器的傳送協(xié)議
組成
請求行+請求頭+請求正文+返回頭部+返回正文
請求行
method Request-URI Http Version
GET /index.html HTTP/1.1
請求頭部
<pre style="box-sizing: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; overflow: auto; border-radius: 3px; padding: 2px; line-height: 1.4; word-wrap: normal; display: block; background: rgb(63, 63, 63); color: rgb(220, 220, 220); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">Host: 172.16.37.66
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
If-None-Match: "5aae859e-34b"
If-Modified-Since: Sun, 18 Mar 2018 15:28:30 GMT</pre>
請求正文
請求是form表單數(shù)據(jù)或application/json 格式數(shù)據(jù)
返回頭部
<pre style="box-sizing: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; white-space: pre-wrap; overflow: auto; border-radius: 3px; padding: 2px; line-height: 1.4; word-wrap: normal; display: block; background: rgb(63, 63, 63); color: rgb(220, 220, 220); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">Server: nginx/1.10.3
Date: Wed, 21 Mar 2018 21:26:19 GMT
Last-Modified: Sun, 18 Mar 2018 15:28:30 GMT
Connection: keep-alive
ETag: "5aae859e-34b"
Access-Control-Allow-Origin: *</pre>
返回正文
服務(wù)端返回的結(jié)果
TCP握手
SYN---->SYN-ACK---->ACK
附錄四： https協(xié)議
定義
https是一個在網(wǎng)絡(luò)上改寫的超文本安全通信傳輸協(xié)議。
在原有的TCP三次握手基礎(chǔ)上递递，還有一次握手服務(wù)端下發(fā)ssl證書（所有者喷橙，域名公鑰，數(shù)字簽名登舞，證書時間等）贰逾，客戶端驗證證書。
證書
自簽名證書或CA頒發(fā)
加密
對稱加密和非對稱加密
附錄五：SPDY與ALPN
SPDY ：是speedy的縮寫逊躁，由Google開發(fā)實現(xiàn)似踱，現(xiàn)已被棄用隅熙，它的目的是減少頁面加載延遲稽煤，提高網(wǎng)站安全，主要是通過壓縮囚戚，多路復(fù)用酵熙，優(yōu)先級減少延遲。
ALPN：Application-Layer Protocol Negotiation, 它允許應(yīng)用層商議在一個安全的連接上那種協(xié)議執(zhí)行驰坊，為了避免循回繞行匾二。
在與http2.0一起使用時，可以提高頁面壓縮率拳芙，減少網(wǎng)絡(luò)延遲察藐。
作者簡介：
就職于甜橙金融信息技術(shù)部，負(fù)責(zé)前端開發(fā)工作舟扎，先后任職攜程分飞，平安等公司的前端開發(fā)工程師職位，喜歡研究新的技術(shù)睹限，服務(wù)于業(yè)務(wù)需求譬猫，熟練運用Linux/Unix系統(tǒng)命令讯檐，以終端為載體，快速執(zhí)行操作染服。
