Question

这是关于提供图片的网络应用程序。由于相同的请求将始终返回相同的图像，我希望访问的浏览器尽可能积极地缓存图像。我非常想告诉浏览器

这是你的形象。继续保持它;在接下来的几天里，它真的不会改变。无需再回来。真。我保证。

到目前为止，我确实设置了

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

您可能有兴趣查看以下Google代码文章：

Optimize caching: Leverage browser caching

简而言之，所有现代浏览器都应该能够按照指示适当地缓存您的图像，并使用这些HTTP标头。

Answer 2

你可以做得更好。 304s仍然是HTTP请求/响应。虽然图像不会再次下载，但延迟可能会被终止。

如果您可以在图像名称中包含版本标识符，则可以将max-age设置为2年。这样，你可以防止304s。如果图像发生更改，则更新版本标识符，从而更改文件名。这可确保浏览器发出新的请求。

您的项目结构需要进行一些更改。版本标识符可以是上次更新映像时的SVN修订版号，并且可以在构建时自动生成。您还需要更新html，因此如果您在图像名称和图像路径之间有逻辑映射，那么您的工作将更容易。

图像很少更新，因此如果您无法自动执行上述操作，也可以按照手动方法进行操作。诀窍是只添加新图像，永远不要修改它们。

Answer 3

缓存标题有一个非常重要的值，你在这里没有提到：

“post-check = 900，pre-check = 3600”

阅读有关此主题的文章（并搜索更多内容）：

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

Answer 4

我不知道它会超出其他人提供的解决方案，但您可以使用HTML5 offline web apps工具更明确地要求浏览器存储本地副本。

Answer 5

尝试.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 6

您可以为每个图片添加ETag表示，然后将其与入站请求的If-None-Match标头进行比较（请参阅“Why isn’t my custom delivered image caching in the browser?”）。使用首选的Last-Modified标头时这是多余的，而且无论如何它只是说304的另一种方式。（我认为GAE会自动为静态文件执行此操作，但不确定。）

Gravatar设置非常古老的Last-Modified日期 - 默认似乎是“Wed，11 Jan 1984 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/

要求浏览器尽可能积极地进行缓存

7 个答案: