讓互聯網更快，Server Push 特性及開啓方式詳解

過去 Nginx 並不支持 HTTP/2 的 Server Push 特性，幸運的是 Nginx 1.13.9 已支持該特性，詳情介紹請移步 Nginx 官方博客。

Server Push 這個特性是讓服務端將部分資源主動推送給客戶端（瀏覽器），節約了客戶端須要使用這些資源再次發送請求所消耗的時間。

又拍雲在 Nginx 基礎上，其全網 CDN 已支持 HTTP/2 的 Server Push 特性，成爲國內首家推出 Server Push 功能的 CDN 廠商。這也是自又拍雲 CDN 全網支持 TLS 1.3 以來，又一重要特性的更新。未來，咱們會一如既往、竭盡全力地保持新特性的更新迭代，爲全網用戶帶來更加快速的訪問體驗。

本文將圍繞如下 3 個方面來介紹 Server Push 特性：

1. 什麼是 Server Push ？
2. 如何使用 Server Push ？
3. 如何驗證 Server Push 是否生效？

什麼是 Server Push

Server Push 是 HTTP/2 規範中引入的一種新技術，即服務端在沒有被客戶端明確的詢問下，搶先地 「推送」 一些網站資源給客戶端（瀏覽器），該特性能夠極大的改善頁面訪問效果。

爲了更方便的理解，下文將進行對比分析：

WEB 瀏覽器訪問 WEB 服務端遵循着請求--響應模式。也即 WEB 瀏覽器請求一個資源，WEB 服務器響應一個資源。以常規的網頁爲例，當請求一個 /index.html 後，WEB 服務端響應一個 /index.html 頁面給 WEB 瀏覽器，此時 WEB 瀏覽器會去解析該 /index.html 頁面，發現還須要去加載 JS、CSS、圖片等資源，此時客戶端會依次去請求這些資源。這無形當中影響了首屏渲染的時間，不利於頁面快速加載和渲染。

使用 Server Push 技術以後，當 WEB 瀏覽器請求 /index.html 以後，WEB 服務端會直接將須要推送的資源一併發給 WEB 瀏覽器，而不須要 WEB 瀏覽器依次進行請求，這減小了 WEB 瀏覽器進行請求所消耗的時間。

如何使用 Server Push

又拍雲 CDN 支持 Server Push 特性能夠經過以下兩種方式來實現：

1.利用 HTTP Link 首部

該方式在 W3C Preload 工做草案中有詳細描述。示例爲：

Link: </static/css/style.css>; rel=preload; as=style;

其中，Link 首部中 as 是必選的，它告訴了瀏覽器推送的資源類型，例如 as=style 代表了推送的資源是一個樣式表，除了樣式表，您還能夠推送其餘的內容類型，詳情參見支持的內容類型。

若是須要進行多資源推送，能夠進行以下設置：

Link: </static/css/styles.css>; rel=preload; as=style, </js/scripts.js>; rel=preload; as=script, </img/logo.png>; rel=preload; as=image

2. CDN 控制檯自定義 Server Push 配置

登錄 CDN 控制檯，依次進入：服務管理 > 功能配置 > HTTPS > HTTP/2 ，點擊【管理】按鈕便可開始配置，例如：

匹配路徑爲：

/index.html

推送資源爲：

/static/123.css 
/static/456.js

在 CDN 控制檯的配置如截圖所示：

其中【匹配路徑】爲必填項，【推送資源】爲非必填項。

以上兩種方式，須要注意以下事項：

• 若是源站已經經過 Link 首部來實現服務推送，在 CDN 端的配置只須要配置【匹配路徑】便可，無需配置【推送資源】選項；其中經過 Link 首部推送資源 CDN 已經默認開啓。
• 若是在 CDN 端進行自定義 Server Push 推送資源配置，則優先級會高於源站設置的 Link 頭部。
• 不管何種實現方式，總的（包括 Link 首部和 CDN 自定義的方式）推送資源數量不超過 8 個。

如何驗證 Server Push 是否生效

1. 經過 Google Chrome 瀏覽器進行測試

在 CDN 控制檯進行了以下配置：

經過 Google Chrome 開發者工具進行抓包查看，推送的資源都被 Push 了，如截圖所示：

查看資源 /index.html 的資源響應頭信息，並查看 x-upyun-h2-pushed 字段：

age: 501691
cache-control: max-age=691200 
content-encoding: br 
content-type: text/html 
date: Thu, 19 Apr 2018 05:32:26 GMT 
etag: W/"86ef9cae8d9f9e1205b25357e78a149b" 
expires: Sat, 21 Apr 2018 10:10:55 GMT 
last-modified: Fri, 13 Apr 2018 10:10:45 GMT 
server: marco/2.1 
set-cookie: UPYUNPUSH=582825323-1696419771-1484613131-3932011035; Max-Age=7200 
status: 200 
vary: Accept-Encoding 
via: T.205.M, V.403-zj-fud-207, S.mix-sd-dst-035, T.40.M, V.mix-sd-dst-044, T.136.H, M.cun-sd-lyi1-136 
x-content-type: text/html 
x-request-id: 04dc2c7db2c509af1efc7d7252f0c2ce; 319efa6d981c0cb8dfb2b389368284f4 
x-source: U/200 
x-upyun-h2-pushed: /image/meinv1.jpg; /image/meinv2.jpg; /image/meinv3.jpg; /image/meinv4.jpg

其中，x-upyun-h2-pushed 字段內容爲：

x-upyun-h2-pushed: /image/meinv1.jpg; /image/meinv2.jpg; /image/meinv3.jpg; /image/meinv4.jpg

也能夠說明所配置的推送資源被成功 Push 了。

2. 經過 <u style="text-decoration: none; border-bottom: 1px solid rgba(68, 68, 68, 0.72);">nghttp</u> 工具進行測試

測試命令爲：

nghttp -ans https://server-push.upyun.club/index.html

測試結果以下：

id  responseEnd requestStart  process code size request path
13   +112.01ms     +69us 111.94ms  200  167 /index.html
 8   +1.31s *   +56.96ms 1.25s  200 314K /image/meinv4.jpg
 6   +2.17s *   +56.95ms 2.11s  200 628K /image/meinv3.jpg
 4   +2.34s *   +56.94ms 2.28s  200 717K /image/meinv2.jpg
 2   +2.42s *   +56.91ms 2.36s  200 726K /image/meinv1.jpg

從測試結果中能夠看出，被推推送的資源在 requestStart 欄左側以星號標記了出來。

推薦閱讀：

一文讀懂 HTTP/2 特性
從應用層協議協商機制看，是否應該選擇支持 HTTP/2 的 CDN​

參考文檔：

HTTP/2 Server Push Service | Cloudflare
A Comprehensive Guide To HTTP/2 Server Push​
Introducing HTTP/2 Server Push with NGINX 1.13.9 | NGINX​