代码之家 › 专栏 › 技术社区 › balpha

要求浏览器尽可能快速地缓存

http-headers caching browser http

balpha · 技术社区 · 15 年前

这是一个提供图像服务的Web应用程序。因为相同的请求总是返回相同的图像,所以我希望访问浏览器尽可能积极地缓存图像。我很想告诉浏览器

这是你的照片。继续保持下去,在接下来的几天里不会改变。没必要回来。真的?我保证。

到目前为止,我已经准备好了

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

当然,返回 304 not modified 如果请求具有适当的 If-Modified-Since 标题。

还有什么我可以做的(或者我应该做的其他事情)来把我的消息传递到浏览器上吗?

该应用程序托管在谷歌应用引擎上,以防万一。

7 回复 | 直到 15 年前

Daniel Vassallo 15 年前

您可能有兴趣查看以下谷歌代码文章:

Optimize caching: Leverage browser caching

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

Sripathi Krishnan 15 年前

你可以做得更好。304s仍然是一个HTTP请求/响应。虽然图像不会再次下载,但延迟可能会很长。

如果可以在图像名称中包含版本标识符,则可以将最大使用年限设置为2年。这样,就可以防止304s。如果映像发生更改,则更新版本标识符,从而更改文件名。这样可以确保浏览器发出新的请求。

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

图像很少被更新,所以如果你不能自动化我上面描述的内容,你也可以使用手动方法。诀窍是只添加新图像,而不修改它们。

Ken 15 年前

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

Aristos 15 年前

缓存头上有一个非常重要的值,您在这里没有提到:

“后检查=900,预检查=3600”

阅读有关此主题的本文(并搜索更多内容):

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

Alec Smart 15 年前

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

Community CDub 8 年前

你能够添加一个 ETag 表示每个图像,然后将其与 If-None-Match 入站请求的标题(请参见“ Why isnât my custom delivered image caching in the browser? “”。在使用首选项时,这是多余的 Last-Modified 不管怎样,这只是说304的另一种方式。(我认为GAE会自动对静态文件执行此操作,但不确定。)

Gravatar套装很旧 最后修改 日期——默认为“1984年1月11日星期三,格林威治标准时间08:00:00”。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小时)。

Mihai 15 年前

几天的缓存时间很短。你应该把它设定为一年甚至更长。当然,当图像实际发生更改时,这可能会引发问题,但您可以通过向图像添加版本号和更改引用图像的页面以包括新图像的路径来解决问题。

我在这里写了更多关于Web应用程序缓存的信息: http://patchlog.com/web/7-methods-to-cache-web-applications/