要求瀏覽器儘可能積極緩存

Question

這是關於爲圖像提供服務的Web應用程序。由於相同的請求將始終返回相同的圖像，因此我希望訪問瀏覽器儘可能積極地緩存圖像。我非常想告訴瀏覽器

這是您的圖片。繼續保持它;在接下來的幾天裏它真的不會改變。不需要回來。真。我承諾。

我做的，到目前爲止，設置

Cache-Control: public, max-age=86400 
Last-Modified: (some time ago) 
Expires: (two days from now)

，當然返回304 not modified如果要求有適當的If-Modified-Since頭。

還有什麼我可以做的（或者我應該做的不同）我的消息傳遞給瀏覽器？

該應用程序託管在Google App Engine上，以防萬一。

Answer 1

你可能有興趣在檢查出下面的谷歌代碼的文章：

• Optimize caching: Leverage browser caching

簡而言之，所有現代瀏覽器應該能夠適當地緩存您的圖片的指示，與HTTP標頭。

Answer 2

嘗試的.htaccess像

<ifmodule mod_gzip.c> 
    mod_gzip_on Yes 
    mod_gzip_dechunk Yes 
    mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ 
    mod_gzip_item_include handler ^cgi-script$ 
    mod_gzip_item_include mime ^text/.* 
    mod_gzip_item_include mime ^application/x-javascript.* 
    mod_gzip_item_exclude mime ^image/.* 
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* 
</ifmodule> 

<ifmodule mod_deflate.c> 
AddType application/x-compress .Z 
AddType application/x-gzip .gz .tgz 
AddType application/x-httpd-php .php 
AddType application/x-httpd-php .php3 
AddOutputFilterByType DEFLATE text/html 
AddOutputFilterByType DEFLATE text/plain 
AddOutputFilterByType DEFLATE text/xml 
AddOutputFilterByType DEFLATE application/x-httpd-php 
AddOutputFilterByType DEFLATE application/x-javascript 
</ifmodule> 

<ifmodule mod_expires.c> 
    ExpiresActive On 
    ExpiresDefault "access plus 1 seconds" 
    ExpiresByType text/html "access plus 1 seconds" 
    ExpiresByType image/gif "access plus 2592000 seconds" 
    ExpiresByType image/jpeg "access plus 2592000 seconds" 
    ExpiresByType image/png "access plus 2592000 seconds" 
    ExpiresByType text/css "access plus 604800 seconds" 
    ExpiresByType text/javascript "access plus 216000 seconds" 
    ExpiresByType application/x-javascript "access plus 216000 seconds" 
</ifmodule> 

<ifmodule mod_headers.c> 
    <filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$"> 
    Header set Cache-Control "max-age=2592000, public" 
    </filesmatch> 
    <filesMatch "\\.(css)$"> 
    Header set Cache-Control "max-age=604800, public" 
    </filesmatch> 
    <filesMatch "\\.(js)$"> 
    Header set Cache-Control "max-age=216000, private" 
    </filesmatch> 
    <filesMatch "\\.(xml|txt)$"> 
    Header set Cache-Control "max-age=216000, public, must-revalidate" 
    </filesmatch> 
    <filesMatch "\\.(html|htm|php)$"> 
    Header set Cache-Control "max-age=1, private, must-revalidate" 
    </filesmatch> 
</ifmodule> 

Answer 3

你可以做的更好。 304s仍然是一個HTTP請求/響應。雖然圖像不會再次下載，但延遲可能會被破壞。

如果您可以在圖像名稱中包含版本標識符，則可以將最大年齡設置爲2年。這樣，你可以防止304s。如果圖像發生更改，則更新版本標識符，從而更改文件名稱。這確保瀏覽器將發出新的請求。

它需要對您的項目結構進行一些更改。版本標識符可以是上次更新映像時的SVN修訂版本號，並且可以在構建時自動生成。你還需要更新html，所以如果你有一個圖像名稱和圖像路徑之間的邏輯映射，你的工作會更容易。

圖像很少更新，因此如果您無法自動執行上述操作，您也可以採用手動方法。訣竅是隻添加新圖像，不要修改它們。

Answer 4

有，你有沒有在這裏提到的緩存頭非常重要的價值：

「後的檢查= 900，預檢查= 3600」

閱讀這篇文章關於這個話題（和尋找更多）：

http://www.rdlt.com/cache-control-post-check-pre-check.html

Answer 5

我不知道日它將超越其他人提供的解決方案，但您可以使用HTML5 offline web apps工具來更明確地要求瀏覽器存儲本地副本。

Answer 6

您可以添加ETag表示爲每個圖像，然後把它比作在入站請求If-None-Match頭（見「Why isn’t my custom delivered image caching in the browser?」）。這在使用首選的Last-Modified標題時是多餘的，並且它只是用於說出304的另一種方式。 （我認爲GAE會自動爲靜態文件執行此操作，但不確定。）

Gravatar設置很舊Last-Modified日期 - 默認情況似乎是「星期三，1984年1月11日08:00:00 GMT」。 5分鐘到期會導致瀏覽器頻繁檢查更新的圖像。換句話說，我認爲他們正在邀請304s，而不是試圖說服瀏覽器只使用本地緩存。他們的標題看起來像這樣：

Date: Sat, 20 Mar 2010 07:52:43 GMT 
Last-Modified: Wed, 11 Jan 1984 08:00:00 GMT 
Expires: Sat, 20 Mar 2010 07:57:43 GMT 
Cache-Control: max-age=300 

最大的區別是過期時間 - 你想要兩天，他們想要五分鐘。因此，如果你想讓瀏覽器在48小時內使用緩存圖像，請執行你正在做的操作，只設置Cache-Control: max-age=172800（86400是24小時）。

Answer 7

幾天緩存時間非常低。你應該把它設置爲一年或更多。 當然，這可能會引起圖像實際更改時出現的問題，但您可以通過向圖像添加版本號並更改引用圖像的頁面以包含新圖像的路徑來解決該問題。

我寫了更多關於Web應用程序的緩存位置： http://patchlog.com/web/7-methods-to-cache-web-applications/