2012-03-19 74 views
8
不緩存資產

場景:瀏覽器(Chrome)不從CloudFront的

我設置從定製原點的Cloudfront distribuition(我的服務器),以漸進流的MP4視頻文件的列表。

這些文件通過Chrome原生HTML5視頻API循環播放。每次視頻結束時,Chrome都會向該文件發出另一個請求。

當從我的服務器播放文件,瀏覽器返回

Status Code:206 Partial Content (from cache) 

對每個請求,打從CloudFront的同一個文件時,同時,Chrome絕不會緩存文件,並保持在每個請求下載吧!

這些都是從Amazon CloudFront的響應報頭在Chrome:

HTTP/1.0 206 Partial Content 
Date: Mon, 19 Mar 2012 19:47:44 GMT 
Server: Apache 
Last-Modified: Mon, 19 Mar 2012 12:35:37 GMT 
ETag: "a78e87ba-335d8e-4bb97cb9f887f" 
Accept-Ranges: bytes 
Content-Type: video/mp4 
Content-Range: bytes 4228-3366285/3366286 
Content-Length: 3362058 
Age: 3819 
X-Cache: Hit from cloudfront 
X-Amz-Cf-Id: xxxxxx 
Via: 1.0 xxxxxx.cloudfront.net (CloudFront) 
Connection: keep-alive 

在同一個文件的瀏覽器響應頭從我的服務器(產地):

HTTP/1.1 206 Partial Content 
Date: Mon, 19 Mar 2012 20:50:40 GMT 
Server: Apache 
Last-Modified: Mon, 19 Mar 2012 12:35:37 GMT 
ETag: "a78e87ba-335d8e-4bb97cb9f887f" 
Accept-Ranges: bytes 
Content-Length: 3366286 
Content-Range: bytes 0-3366285/3366286 
Keep-Alive: timeout=2, max=256 
Connection: Keep-Alive 
Content-Type: video/mp4 

我缺少的東西?

也許原因在於CloudFront響應中缺少Keep-Alive標頭?或者可能在不同的HTTP協議版本(1.0 vs 1.1)中?

UPDATE:

我還添加了Expires和Cache-控制頭,什麼都沒有改變。這令人遺憾地使得漂亮的無用危險結合HTML5視頻API和亞馬遜CloudFront。

從Inspector的屏幕截圖,你可以看到在每個循環的文件重新下載: http://i.imgur.com/0VyZD.jpg

這是從本地服務器加載的文件的另一個截圖: http://i.imgur.com/go1zN.jpg

UPDATE 2:

這似乎並不嚴格與CloudFront相關。各種測試後,它似乎Chrome不緩存視頻,如果

1)該文件是大於2MB 2)更大的Content-Range頭不從0開始(見上面的例子型動物)

而且我覺得它只與本機HTML5視頻API及其206部分內容狀態有關。

回答

8

從您的CloudFront的迴應:

HTTP/1.0 206部分內容

HTTP/1.0不包含206響應代碼(這是在HTTP /加1.1),因此Chrome的緩存層拒絕重用該響應。 http://crbug.com/128116中的更多特定於Chrome的詳細信息,但簡短答案是CloudFront應該以HTTP/1.1而不是/1.0的形式提供206個響應。

+0

FTR,通過https://forums.aws.amazon.com/thread.jspa?threadID=96247 – Ami 2012-06-05 19:22:12

+2

報告給AWS CF有沒有客戶端解決方法?我討厭所有的視頻如何緩存。 – 2013-05-18 23:33:53

+0

另請參閱:https://forums.aws.amazon.com/thread.jspa?threadID=124998 – 2013-05-30 22:09:10

2

沒有指定expires/cache-control標頭。如果沒有提供expires頭文件,Chrome瀏覽器對於緩存項目(尤其是通過javascript動態添加到DOM中)可能非常特別。

http://code.google.com/speed/page-speed/docs/caching.html

從谷歌:

指定的一個很重要的過期或緩存控制最大年齡,和Last-Modified或ETag之一,所有可緩存資源。指定Expires和Cache-Control:max-age或指定Last-Modified和ETag都是多餘的。

+0

謝謝,我要添加一個Expires標題並嘗試。不過,我仍然無法理解Chrome爲什麼從我的服務器緩存文件,而不是從Cloudfront緩存文件。 – achairapart 2012-03-19 22:19:16

+0

從本地服務器和Amazon提供的文件的其他項目是否相同?也許緩存啓發式正在評估該文件基於其所包含的相鄰內容對該文件採取的不同做法。 – javram 2012-03-19 22:26:35

+0

已添加過期標頭,沒有任何更改。其他對象具有相同的行爲。我懷疑這是206部分內容狀態。我還添加了Chrome Inspector的屏幕截圖。 – achairapart 2012-03-19 22:47:35

相關問題