HTTP/2 協議的主要目的是提高網頁效能。
頭資訊（header）原來是直接傳輸文字，現在是壓縮後傳輸。原來是同一個 TCP 連線裡面，上一個回應（response）傳送完了，伺服器才能傳送下一個，現在可以多個回應一起傳送。
伺服器推送（server push）是 HTTP/2 協議裡面，唯一一個需要開發者自己配置的功能。其他功能都是伺服器和瀏覽器自動實現，不需要開發者關心。
本文詳細介紹伺服器推送的原理和配置方法。
一、傳統的網頁請求方式
下面是一個非常簡單的 HTML 網頁檔案index.html。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>hello world</h1> <img src="example.png"> </body> </html>
這個網頁包含一張樣式表style.css和一個圖片檔案example.png。為了渲染這個網頁，瀏覽器會發出三個請求。第一個請求是index.html。
GET /index.html HTTP/1.1
伺服器收到這個請求，就把index.html傳送給瀏覽器。瀏覽器發現裡面包含了樣式表和圖片，於是再發出兩個請求。
GET /style.css HTTP/1.1
GET /example.png HTTP/1.1
這就是傳統的網頁請求方式。它有兩個問題，一是至少需要兩輪 HTTP 通訊，二是收到樣式檔案之前，網頁都會顯示一片空白，這個階段一旦超過2秒，使用者體驗就會非常不好。
二、傳統方式的改進
一種解決辦法就是把外部資源合併在網頁檔案裡面，減少 HTTP 請求。比如，把樣式表的內容寫在<style>標籤之中，把圖片改成 Base64 編碼的 Data URL。
另一種方法就是資源的預載入（preload）。網頁預先告訴瀏覽器，立即下載某些資源。比如，上例可以寫成下面這樣。
<link rel="preload" href="/styles.css" as="style"> <link rel="preload" href="/example.png" as="image">
對於上例來說，preload命令並沒有什麼幫助。但是，如果前一個網頁就使用這個命令，預載入後一個網頁需要的資源，那麼使用者開啟後一個網頁時，就會感覺速度飛快。
這兩種方法都有缺點。第一種方法雖然減少了 HTTP 請求，但是把不同型別的程式碼合併在一個檔案裡，違反了分工原則。第二種方法只是提前了下載時間，並沒有減少 HTTP 請求。
三、伺服器推送的概念
伺服器推送（server push）指的是，還沒有收到瀏覽器的請求，伺服器就把各種資源推送給瀏覽器。
比如，瀏覽器只請求了index.html，但是伺服器把index.html、style.css、example.png全部傳送給瀏覽器。這樣的話，只需要一輪 HTTP 通訊，瀏覽器就得到了全部資源，提高了效能。
四、Nginx 實現
Nginx 從 1.13.9 版開始，支援伺服器推送。前一篇教程已經做好了 Nginx 容器，接著就來體驗一下。
首先，進入工作目錄，把原來的首頁刪除。
$ cd nginx-docker-demo $ rm html/index.html
然後，新建html/index.html檔案，寫入本文第一節的網頁原始碼。
另外，html子目錄下面，還要新建兩個檔案example.png和style.css。前者可以隨便找一張 PNG 圖片，後者要在裡面寫一些樣式。
h1 { color: red; }
最後，開啟配置檔案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; } }
其實就是最後多了兩行http2_push命令。它的意思是，如果使用者請求根路徑/，就推送style.css和example.png。
現在可以啟動容器了。
$ 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
開啟瀏覽器，訪問 https://127.0.0.2:8081 。瀏覽器會提示證照不安全，不去管它，繼續訪問，就能看到網頁了。
網頁上看不出來伺服器推送，必須開啟"開發者工具"，切換到 Network 皮膚，就可以看到其實只發出了一次請求，style.css和example.png都是推送過來的。
檢視完畢，關閉容器。
$ docker container stop mynginx
五、Apache 實現實現
Apache 也類似，可以在配置檔案httpd.conf或者.htaccess裡面開啟伺服器推送。
<FilesMatch "\index.html$"> Header add Link "</styles.css>; rel=preload; as=style" Header add Link "</example.png>; rel=preload; as=image" </FilesMatch>
六、後端實現
上面的伺服器推送，需要寫在伺服器的配置檔案裡面。這顯然很不方便，每次修改都要重啟服務，而且應用與伺服器的配置不應該混在一起。
伺服器推送還有另一個實現方法，就是後端應用產生 HTTP 回應的頭資訊Link命令。伺服器發現有這個頭資訊，就會進行伺服器推送。
Link: </styles.css>; rel=preload; as=style
如果要推送多個資源，就寫成下面這樣。
Link: </styles.css>; rel=preload; as=style, </example.png>; rel=preload; as=image
這時，Nginx 的配置改成下面這樣。
server { listen 443 ssl http2; # ... root /var/www/html; location = / { proxy_pass http://upstream; http2_push_preload on; } }
如果伺服器或者瀏覽器不支援 HTTP/2，那麼瀏覽器就會按照 preload 來處理這個頭資訊，預載入指定的資原始檔。
事實上，這個頭資訊就是 preload 標準提出的，它的語法和as屬性的值都寫在了標準裡面。
七、快取問題
伺服器推送有一個很麻煩的問題。所要推送的資原始檔，如果瀏覽器已經有快取，推送就是浪費頻寬。即使推送的檔案版本更新，瀏覽器也會優先使用本地快取。
一種解決辦法是，只對第一次訪問的使用者開啟伺服器推送。下面是 Nginx 官方給出的示例，根據 Cookie 判斷是否為第一次訪問。
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 "</style.css>; as=style; rel=preload"; }
八、效能提升
伺服器推送可以提高效能。網上測評的結果是，開啟這項功能，比不開啟時的 HTTP/2 快了8%，比將資源都嵌入網頁的 HTTP/1 快了5%。
可以看到，提升程度也不是特別多，大概是幾百毫秒。而且，也不建議一次推送太多資源，這樣反而會拖累效能，因為瀏覽器不得不處理所有推送過來的資源。只推送 CSS 樣式表可能是一個比較好的選擇。
九、參考連結
- A Comprehensive Guide To HTTP/2 Server Push，by Jeremy Wagner
- Introducing HTTP/2 Server Push with NGINX 1.13.9, by Nginx
（完）