讓網際網路更快，Server Push 特性及開啟方式詳解

又拍雲發表於2018-04-27
Server

過去 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 規範中引入的一種新技術，即服務端在沒有被客戶端明確的詢問下，搶先地 “推送” 一些網站資源給客戶端（瀏覽器），該特性可以極大的改善頁面訪問效果。

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

 
△ 未開啟 HTTP/2 Server Push （圖片來源：www.smashingmagazine.com）

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

 
△ 開啟 HTTP/2 Server Push （圖片來源：www.smashingmagazine.com）

使用 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. 通過 nghttp 工具進行測試

測試命令為：

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​

相關文章