HTTP-2 服務器推送（Server Push）教程

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

可以參考 Go、Node、PHP 的實現範例。

這時，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 樣式表可能是一個比較好的選擇。

九、參考鏈接

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://www.ruanyifeng.com/blog/2018/03/http2_server_push.html

猜你喜歡