摘要：記錄以下資源備忘也就是本文譯文標(biāo)題為意譯，原標(biāo)題為，恐有不當(dāng)，特此說(shuō)明。譯者注翻譯本文時(shí)譯者使用的確實(shí)無(wú)法看到信息，建議使用最新金絲雀版本一探究竟。應(yīng)用程序不應(yīng)當(dāng)依賴(lài)于服務(wù)器推送的可用性及其使用。

本文轉(zhuǎn)載自：眾成翻譯
譯者：文藺
鏈接：http://www.zcfy.cc/article/883
原文：https://blog.cloudflare.com/http-2-server-push-with-multiple-assets-per-link-header/ 

譯者在做自己的一個(gè)小工具（抓取博客的 Chrome 擴(kuò)展）的時(shí)候，使用 jQuery 輔助作為 DOM 解析器，為了避免加載圖片、腳本、樣式表等無(wú)用的資源，在將字符串傳給 $ 的時(shí)候，先對(duì)字符串中的相關(guān)標(biāo)簽進(jìn)行了處理。

但遇到某個(gè)網(wǎng)站的時(shí)候，一直疑惑不解，明明已經(jīng)做了替換，但通過(guò) Chrome Devtools 能看到，部分資源還是會(huì)下載。幾經(jīng)折騰，發(fā)現(xiàn)還是因?yàn)樽约?strong>懂得太少了。

查看請(qǐng)求該頁(yè)面時(shí)的 header，可以看到了如下信息：

link:; rel=preload; as=style, ; rel=preload; as=image, ; rel=preload; as=image, ; rel=preload; as=image, ; rel=preload; as=image, ; rel=preload; as=image, ; rel=preload; as=image, ; rel=preload; as=image, ; rel=preload; as=image, ; rel=preload; as=image

于是，大概能猜出來(lái)上述問(wèn)題的原因。這有點(diǎn)類(lèi)似如一些站點(diǎn)會(huì)使用的 標(biāo)簽（順帶一句，截至 2016 年 7 月 17 日，caniuse 數(shù)據(jù)：China = 26.83%；Global = 44.59%）。

于是深入挖掘了一下。來(lái)看看 W3C 標(biāo)準(zhǔn)是怎么說(shuō)的（同樣由譯者翻譯）：

例如，應(yīng)用可以使用 preload 關(guān)鍵詞，提前、高優(yōu)先級(jí)、不阻塞渲染地拉取的 CSS 資源，它會(huì)在適當(dāng)?shù)臅r(shí)候被使用：

例一：使用標(biāo)簽

例二：使用 HTTP Header

Link: ; rel=preload; as=style

上面的例子說(shuō)明，資源可以通過(guò)聲明性標(biāo)記、HTTP header link 來(lái)指定，或者使用 JavaScript 預(yù)定。

記錄以下資源備忘：

https://w3c.github.io/preload/

http://caniuse.com/#search=preload

http://stackoverflow.com/questions/36641137/how-exactly-does-link-rel-preload-work

https://blog.cloudflare.com/http-2-server-push-with-multiple-assets-per-link-header/（也就是本文）

譯文標(biāo)題為意譯，原標(biāo)題為 HTTP/2 Server Push with multiple assets per Link header，恐有不當(dāng)，特此說(shuō)明。

另，為加強(qiáng)理解 link 報(bào)頭與 HTTP/2 Server Push 二者，譯文正文后附有 W3C preload 標(biāo)準(zhǔn)中 “Server Push (HTTP/2)” 一節(jié)譯文?；蛴兄谧x懂本文。

注： 譯文中凡是 “l(fā)ink 響應(yīng)頭” 的名詞，英文為 “Link header”，翻譯為“響應(yīng)頭 Link 字段”或許更恰當(dāng)。

四月份的時(shí)候，我們宣布為所有的 CloudFlare 網(wǎng)站添加了 HTTP/2 Server Push 試驗(yàn)性支持。這樣做是為了讓客戶(hù)能夠在該新功能的基礎(chǔ)上進(jìn)行迭代。

CC BY 2.0 image by https://www.flickr.com/photos/mryipyop/

我們的 Server Push 實(shí)現(xiàn)，利用了 HTTP Link 報(bào)頭，這在 W3C Preload 工作草案中有詳細(xì)描述。

同樣，我們還展示了，如何在 PHP 代碼 中實(shí)現(xiàn) Server Push，許多人已經(jīng)開(kāi)始測(cè)試、使用該特性了。

然而，我們的初始版本有很?chē)?yán)格的限制：使用 Server Push，則每個(gè) link 報(bào)頭中，最多只能指定一個(gè)資源，另外，很多 CMS 和 Web 開(kāi)發(fā)平臺(tái)都不允許存在多個(gè) link 報(bào)頭。

現(xiàn)在該問(wèn)題已得到解決，多個(gè)資源可以通過(guò)單個(gè) link 報(bào)頭推送。修改是實(shí)時(shí)生效的，如果你的瀏覽器支持 HTTP/2 的話，你正在閱讀的本文就使用了該方式推送資源。

當(dāng) CloudFlare 讀到源服務(wù)器（origin web server）的 link 報(bào)頭時(shí)，它從中移除其中已通過(guò) Server Push 推送給瀏覽器的資源。這樣一來(lái)，要 debug link 和 Server Push 問(wèn)題就困難了，所以我們又加上了一個(gè)叫做 Cf-H2-Pushed 的報(bào)頭，它包含已經(jīng)推送過(guò)的資源。

舉個(gè)例子。打開(kāi)最近的這篇博客，源服務(wù)器就會(huì)發(fā)送以下報(bào)頭：

Cache-Control: public, max-age=0
Content-Encoding: gzip
Content-Length: 33640
Content-Type: text/html; charset=utf-8
Date: Wed, 29 Jun 2016 16:09:37 GMT
Expires: Wed, 29 Jun 2016 16:10:07 GMT
Link: ; rel=preload; as=style,; rel=preload; as=script,; rel=preload; as=image,; rel=preload; as=image,; rel=preload; as=script,; rel=preload; as=script,; rel=preload; as=script
Vary: Accept-Encoding
X-Ghost-Cache-Status:From Cache
X-Powered-By: Express

CloudFlare 決定使用使用 HTTP/2 Server Push 推送這些資源：

 `/assets/css/screen.css?v=5fc240c512`,
 `/content/images/2016/06/Timeouts-001.png`,
 `/content/images/2016/06/Timeouts-002.png`,
 `/assets/js/jquery.fitvids.js?v=5fc240c512`

響應(yīng)通過(guò) CloudFlare 的時(shí)候，這些資源將從 link 報(bào)頭終移除，通過(guò) Server Push 推送，并被添加到 Cf-H2-Pushed 報(bào)頭中：

cache-control:public, max-age=30
cf-cache-status:EXPIRED
cf-h2-pushed:,,,
content-encoding:gzip
content-type:text/html; charset=utf-8
date:Wed, 29 Jun 2016 16:09:37 GMT
expires:Wed, 29 Jun 2016 16:10:07 GMT
link:; rel=preload; as=script,; rel=preload; as=script,; rel=preload; as=script
server:cloudflare-nginx
status:200 OK
vary:Accept-Encoding
x-ghost-cache-status:From Cache
x-powered-by:Express 

在 Google Chrome 金絲雀版本（Google Chrome Canary）的開(kāi)發(fā)者視圖中可以看得很清楚。（譯者注：翻譯本文時(shí)譯者使用的 Chrome 51.0.2704.106 m (64-bit) 確實(shí)無(wú)法看到 Push 信息，建議使用最新金絲雀版本一探究竟。）

如果你在使用 Server Push，請(qǐng)和我們聯(lián)系。推送不同類(lèi)型的資源（圖片 vs 樣式表 vs 腳本）、解決最佳的推送數(shù)量（目前我們支持 每頁(yè)最多 50 條資源），我們對(duì)相關(guān)經(jīng)驗(yàn)十分感興趣。

原文地址： https://w3c.github.io/preload/#server-push-http-2

HTTP/2 ([RFC7540]) 允許服務(wù)器先發(fā)制人地向客戶(hù)端發(fā)送（“推送”）響應(yīng)。推送的響應(yīng)（pushed response）在語(yǔ)義上（semantically）與服務(wù)器對(duì)請(qǐng)求的響應(yīng)（server responding to a request）是等價(jià)的，而且類(lèi)似于預(yù)加載的響應(yīng)（preloaded response）；它會(huì)被瀏覽器保存，在匹配到應(yīng)用啟動(dòng)的其他請(qǐng)求的時(shí)候被執(zhí)行。像這樣的，從應(yīng)用角度來(lái)看，使用預(yù)加載和服務(wù)器推送的請(qǐng)求，并無(wú)差別。

服務(wù)器可能會(huì)為應(yīng)用定義的那些有權(quán)限的 preload link 資源啟用服務(wù)器推送。對(duì)那些聲明的 preload link 資源來(lái)說(shuō)，啟用服務(wù)器推送消除了客戶(hù)端和服務(wù)器之間的請(qǐng)求往返。可選地，如果某個(gè)通過(guò) link 報(bào)頭(RFC5988)聲明的資源不希望使用服務(wù)器推送，開(kāi)發(fā)者*可以使用 nopush 目標(biāo)屬性(RFC5988] section 5.4) 向服務(wù)器提供一個(gè)選擇性退出的信號(hào)。示例如下：

例三
Link: ; rel=preload; as=style; nopush
Link: ; rel=preload; as=script
Note
上面的示例，向一個(gè)可以使用 HTTP/2 推送的服務(wù)器提示， /app/style.css 不應(yīng)被推送（例如，來(lái)源方可能有額外信息顯示其已經(jīng)存在于緩存中），而  /app/script.js 應(yīng)當(dāng)可以作為服務(wù)器推送的候選資源。

為 preload link 啟用服務(wù)器推送是一個(gè)可選的優(yōu)化項(xiàng)。比方說(shuō)，服務(wù)器可能不會(huì)啟用推送，如果它認(rèn)為響應(yīng)在客戶(hù)端緩存中可以拿到：客戶(hù)端會(huì)處理預(yù)加載指令，檢查相關(guān)緩存，如果找不到資源則會(huì)發(fā)送請(qǐng)求。另外，服務(wù)器可能因?yàn)檫\(yùn)維問(wèn)題而不會(huì)啟用推送，比如說(shuō)可用服務(wù)器資源或者其他考量。最后，服務(wù)器推送的啟用取決于協(xié)議的 HTTP/2 連接設(shè)置：客戶(hù)端可能會(huì)限制或完全禁用服務(wù)器推送的使用。應(yīng)用程序不應(yīng)當(dāng)依賴(lài)于服務(wù)器推送的可用性及其使用。