本文原作者阮一峰，作者博客：ruanyifeng.com。
1、前言
新一代HTTP/2 協(xié)議的主要目的是為了提高網(wǎng)頁(yè)性能（有關(guān)HTTP/2的介紹，請(qǐng)見(jiàn)《從HTTP/0.9到HTTP/2：一文讀懂HTTP協(xié)議的歷史演變和設(shè)計(jì)思路》）。
HTTP/2以前版的頭信息（header）是直接傳輸文本，現(xiàn)在是壓縮后傳輸。原來(lái)是同一個(gè) TCP 連接里面，上一個(gè)回應(yīng)（response）發(fā)送完了，服務(wù)器才能發(fā)送下一個(gè)，現(xiàn)在可以多個(gè)回應(yīng)一起發(fā)送。
服務(wù)器推送（server push）是 HTTP/2 協(xié)議里面唯一一個(gè)需要開(kāi)發(fā)者自己配置的功能。其他功能都是服務(wù)器和瀏覽器自動(dòng)實(shí)現(xiàn)，不需要開(kāi)發(fā)者關(guān)心。
本文詳細(xì)介紹新一代HTTP/2服務(wù)器推送技術(shù)（server push）的原理和配置方法等，更多資料請(qǐng)見(jiàn)IETF的http標(biāo)準(zhǔn)工作組維護(hù)的HTTP/2資料頁(yè)：https://http2.github.io/。
網(wǎng)絡(luò)編程學(xué)習(xí)交流：
- 即時(shí)通訊開(kāi)發(fā)交流3群：185926912[推薦]
- 移動(dòng)端IM開(kāi)發(fā)入門(mén)文章：《新手入門(mén)一篇就夠：從零開(kāi)發(fā)移動(dòng)端IM》
（本文同步發(fā)布于：http://www.52im.net/thread-1795-1-1.html）
2、系列文章
本文是系列文章中的第4篇，本系列大綱如下：
《腦殘式網(wǎng)絡(luò)編程入門(mén)(一)：跟著動(dòng)畫(huà)來(lái)學(xué)TCP三次握手和四次揮手》
《腦殘式網(wǎng)絡(luò)編程入門(mén)(二)：我們?cè)谧x寫(xiě)Socket時(shí)，究竟在讀寫(xiě)什么？》
《腦殘式網(wǎng)絡(luò)編程入門(mén)(三)：HTTP協(xié)議必知必會(huì)的一些知識(shí)》
《腦殘式網(wǎng)絡(luò)編程入門(mén)(四)：快速理解HTTP/2的服務(wù)器推送(Server Push)》（本文）
3、傳統(tǒng)的網(wǎng)頁(yè)請(qǐng)求方式
下面是一個(gè)非常簡(jiǎn)單的 HTML 網(wǎng)頁(yè)文件index.html：
hello world
這個(gè)網(wǎng)頁(yè)包含一張樣式表style.css和一個(gè)圖片文件example.png。為了渲染這個(gè)網(wǎng)頁(yè)，瀏覽器會(huì)發(fā)出三個(gè)請(qǐng)求。
第一個(gè)請(qǐng)求是index.html：
GET /index.html HTTP/1.1
服務(wù)器收到這個(gè)請(qǐng)求，就把index.html發(fā)送給瀏覽器。
瀏覽器發(fā)現(xiàn)里面包含了樣式表和圖片，于是再發(fā)出兩個(gè)請(qǐng)求：
GET /style.css HTTP/1.1
GET /example.png HTTP/1.1
這就是傳統(tǒng)的網(wǎng)頁(yè)請(qǐng)求方式，它有兩個(gè)問(wèn)題：
一是至少需要兩輪 HTTP 通信；
二是收到樣式文件之前，網(wǎng)頁(yè)都會(huì)顯示一片空白，這個(gè)階段一旦超過(guò)2秒，用戶(hù)體驗(yàn)就會(huì)非常不好。
4、傳統(tǒng)方式的改進(jìn)
一種解決辦法就是：把外部資源合并在網(wǎng)頁(yè)文件里面，減少 HTTP 請(qǐng)求。比如，把樣式表的內(nèi)容寫(xiě)在標(biāo)簽之中，把圖片改成 Base64 編碼的 Data URL。
另一種方法就是資源的預(yù)加載（preload）：網(wǎng)頁(yè)預(yù)先告訴瀏覽器，立即下載某些資源。比如，上例可以寫(xiě)成下面這樣：
對(duì)于上例來(lái)說(shuō)，preload命令并沒(méi)有什么幫助。但是，如果前一個(gè)網(wǎng)頁(yè)就使用這個(gè)命令，預(yù)加載后一個(gè)網(wǎng)頁(yè)需要的資源，那么用戶(hù)打開(kāi)后一個(gè)網(wǎng)頁(yè)時(shí)，就會(huì)感覺(jué)速度飛快。
這兩種方法都有缺點(diǎn)：
第一種方法雖然減少了 HTTP 請(qǐng)求，但是把不同類(lèi)型的代碼合并在一個(gè)文件里，違反了分工原則；
第二種方法只是提前了下載時(shí)間，并沒(méi)有減少 HTTP 請(qǐng)求。
5、服務(wù)器推送的概念
HTTP/2的服務(wù)器推送技術(shù)（server push）指的是，還沒(méi)有收到瀏覽器的請(qǐng)求，服務(wù)器就把各種資源推送給瀏覽器。
比如：瀏覽器只請(qǐng)求了index.html，但是服務(wù)器把index.html、style.css、example.png全部發(fā)送給瀏覽器。這樣的話(huà)，只需要一輪 HTTP 通信，瀏覽器就得到了全部資源，提高了性能。
6、Nginx對(duì)HTTP/2服務(wù)端器推送技術(shù)的支持和實(shí)現(xiàn)
Nginx 從 1.13.9 版開(kāi)始，支持服務(wù)器推送。我在《Nginx 容器教程》一文中已經(jīng)介紹并做好了 Nginx 容器，接著就來(lái)體驗(yàn)一下。
首先，進(jìn)入工作目錄，把原來(lái)的首頁(yè)刪除：
$ cd nginx-docker-demo
$ rm html/index.html
然后，新建html/index.html文件，寫(xiě)入本文第一節(jié)的網(wǎng)頁(yè)源碼。
另外，html子目錄下面，還要新建兩個(gè)文件example.png和style.css。前者可以隨便找一張 PNG 圖片，后者要在里面寫(xiě)一些樣式：
h1{
color: red;
}
最后，打開(kāi)配置文件conf/conf.d/default.conf，將 443 端口的部分改成下面的樣子：
server {
listen 443 ssl http2;
server_name localhost;
ssl on;
ssl_certificate /etc/nginx/certs/example.crt;
ssl_certificate_key /etc/nginx/certs/example.key;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
http2_push /style.css;
http2_push /example.png;
}
}
其實(shí)就是最后多了兩行http2_push命令。它的意思是，如果用戶(hù)請(qǐng)求根路徑/，就推送style.css和example.png。
現(xiàn)在可以啟動(dòng)容器了：
$ docker container run \
--rm\
--name mynginx \
--volume "$PWD/html":/usr/share/nginx/html\
--volume "$PWD/conf":/etc/nginx\
-p 127.0.0.2:8080:80 \
-p 127.0.0.2:8081:443 \
-d \
nginx
打開(kāi)瀏覽器，訪問(wèn) https://127.0.0.2:8081 。瀏覽器會(huì)提示證書(shū)不安全，不去管它，繼續(xù)訪問(wèn)，就能看到網(wǎng)頁(yè)了。
網(wǎng)頁(yè)上看不出來(lái)服務(wù)器推送，必須打開(kāi)"開(kāi)發(fā)者工具"，切換到 Network 面板，就可以看到其實(shí)只發(fā)出了一次請(qǐng)求，style.css和example.png都是推送過(guò)來(lái)的：
查看完畢，關(guān)閉容器：
$ docker container stop mynginx
7、Apache 服務(wù)器上的實(shí)現(xiàn)
Apache 也類(lèi)似，可以在配置文件httpd.conf或者.htaccess里面打開(kāi)服務(wù)器推送：
Header add Link "; rel=preload; as=style"
Header add Link "; rel=preload; as=image"
8、服務(wù)器推送的另一種實(shí)現(xiàn)方法：后端實(shí)現(xiàn)
上面的服務(wù)器推送，需要寫(xiě)在服務(wù)器的配置文件里面。這顯然很不方便，每次修改都要重啟服務(wù)，而且應(yīng)用與服務(wù)器的配置不應(yīng)該混在一起。
服務(wù)器推送還有另一個(gè)實(shí)現(xiàn)方法，就是后端應(yīng)用產(chǎn)生 HTTP 回應(yīng)的頭信息Link命令。
服務(wù)器發(fā)現(xiàn)有這個(gè)頭信息，就會(huì)進(jìn)行服務(wù)器推送：
Link: ; rel=preload; as=style
如果要推送多個(gè)資源，就寫(xiě)成下面這樣。
如果要推送多個(gè)資源，就寫(xiě)成下面這樣：
Link: ; rel=preload; as=style, ; rel=preload; as=image
可以參考 Go、Node、PHP 的實(shí)現(xiàn)范例。
這時(shí)，Nginx 的配置改成下面這樣：
server {
listen 443 ssl http2;
# ...
root /var/www/html;
location = / {
proxy_pass http://upstream;
http2_push_preload on;
}
}
如果服務(wù)器或者瀏覽器不支持 HTTP/2，那么瀏覽器就會(huì)按照 preload 來(lái)處理這個(gè)頭信息，預(yù)加載指定的資源文件。
事實(shí)上，這個(gè)頭信息就是 preload 標(biāo)準(zhǔn)提出的，它的語(yǔ)法和as屬性的值都寫(xiě)在了標(biāo)準(zhǔn)里面。
9、緩存問(wèn)題
服務(wù)器推送有一個(gè)很麻煩的問(wèn)題。所要推送的資源文件，如果瀏覽器已經(jīng)有緩存，推送就是浪費(fèi)帶寬。即使推送的文件版本更新，瀏覽器也會(huì)優(yōu)先使用本地緩存。
一種解決辦法是，只對(duì)第一次訪問(wèn)的用戶(hù)開(kāi)啟服務(wù)器推送。
下面是 Nginx 官方給出的示例，根據(jù) Cookie 判斷是否為第一次訪問(wèn)：
server {
listen 443 ssl http2 default_server;
ssl_certificate ssl/certificate.pem;
ssl_certificate_key ssl/key.pem;
root /var/www/html;
http2_push_preload on;
location = /demo.html {
add_header Set-Cookie "session=1";
add_header Link $resources;
}
}
map $http_cookie $resources {
"~*session=1""";
default "; as=style; rel=preload";
}
10、使用HTTP/2服務(wù)端推送帶來(lái)的性能提升
服務(wù)器推送可以提高性能。網(wǎng)上測(cè)評(píng)的結(jié)果是，打開(kāi)這項(xiàng)功能，比不打開(kāi)時(shí)的 HTTP/2 快了8%，比將資源都嵌入網(wǎng)頁(yè)的 HTTP/1 快了5%。
可以看到，提升程度也不是特別多，大概是幾百毫秒。而且，也不建議一次推送太多資源，這樣反而會(huì)拖累性能，因?yàn)闉g覽器不得不處理所有推送過(guò)來(lái)的資源。只推送 CSS 樣式表可能是一個(gè)比較好的選擇。
（本文同步發(fā)布于：http://www.52im.net/thread-1795-1-1.html）
附錄：更多網(wǎng)絡(luò)編程文章精選
如果您覺(jué)得《腦殘式網(wǎng)絡(luò)編程入門(mén)》系列文章過(guò)于基礎(chǔ)，您可直接閱讀以下系列：
《網(wǎng)絡(luò)編程懶人入門(mén)(一)：快速理解網(wǎng)絡(luò)通信協(xié)議（上篇）》
《網(wǎng)絡(luò)編程懶人入門(mén)(二)：快速理解網(wǎng)絡(luò)通信協(xié)議（下篇）》
《網(wǎng)絡(luò)編程懶人入門(mén)(三)：快速理解TCP協(xié)議一篇就夠》
《網(wǎng)絡(luò)編程懶人入門(mén)(四)：快速理解TCP和UDP的差異》
《網(wǎng)絡(luò)編程懶人入門(mén)(五)：快速理解為什么說(shuō)UDP有時(shí)比TCP更有優(yōu)勢(shì)》
《網(wǎng)絡(luò)編程懶人入門(mén)(六)：史上最通俗的集線器、交換機(jī)、路由器功能原理入門(mén)》
《不為人知的網(wǎng)絡(luò)編程》系列文章為高階必讀，該系列目錄如下：
《不為人知的網(wǎng)絡(luò)編程(一)：淺析TCP協(xié)議中的疑難雜癥(上篇)》
《不為人知的網(wǎng)絡(luò)編程(二)：淺析TCP協(xié)議中的疑難雜癥(下篇)》
《不為人知的網(wǎng)絡(luò)編程(三)：關(guān)閉TCP連接時(shí)為什么會(huì)TIME_WAIT、CLOSE_WAIT》
《不為人知的網(wǎng)絡(luò)編程(四)：深入研究分析TCP的異常關(guān)閉》
《不為人知的網(wǎng)絡(luò)編程(五)：UDP的連接性和負(fù)載均衡》
《不為人知的網(wǎng)絡(luò)編程(六)：深入地理解UDP協(xié)議并用好它》
關(guān)于移動(dòng)端網(wǎng)絡(luò)特性及優(yōu)化手段的總結(jié)性文章請(qǐng)見(jiàn)：
《現(xiàn)代移動(dòng)端網(wǎng)絡(luò)短連接的優(yōu)化手段總結(jié)：請(qǐng)求速度、弱網(wǎng)適應(yīng)、安全保障》
《移動(dòng)端IM開(kāi)發(fā)者必讀(一)：通俗易懂，理解移動(dòng)網(wǎng)絡(luò)的“弱”和“慢”》
《移動(dòng)端IM開(kāi)發(fā)者必讀(二)：史上最全移動(dòng)弱網(wǎng)絡(luò)優(yōu)化方法總結(jié)》
（本文同步發(fā)布于：http://www.52im.net/thread-1795-1-1.html）