php - 为什么浏览器要求缓存文件？

Question

我的 htaccess 中有这些指令:

# BEGIN Compress text files
<ifModule mod_deflate.c>
  <filesMatch "\.(css|js|x?html?|php)$">
    SetOutputFilter DEFLATE
  </filesMatch>
</ifModule>
# END Compress text files

# BEGIN Expire headers
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType image/x-icon "access plus 86400 seconds"
  ExpiresByType image/jpeg "access plus 86400 seconds"
  ExpiresByType image/png "access plus 86400 seconds"
  ExpiresByType image/gif "access plus 86400 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 86400 seconds"
  ExpiresByType text/css "access plus 86400 seconds"
  ExpiresByType text/javascript "access plus 86400 seconds"
  ExpiresByType application/javascript "access plus 86400 seconds"
  ExpiresByType application/x-javascript "access plus 86400 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "max-age=86400, public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "max-age=86400, public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "max-age=86400, private"
  </filesMatch>
  <filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "max-age=600, private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers

# BEGIN Turn ETags Off
<ifModule mod_headers.c>
  Header unset ETag
</ifModule>
FileETag None
# END Turn ETags Off

# BEGIN Remove Last-Modified Header
<ifModule mod_headers.c>
  Header unset Last-Modified
</ifModule>
# END Remove Last-Modified Header

(取自here)

我正在使用 Chrome 进行测试，我注意到应该缓存的 CSS 文件实际上没有被缓存:

一个随机 CSS 文件的请求 header 是:

Accept:text/css,*/*;q=0.1
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:es-ES,es;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Cookie:sua_language=en; keep=0; user=0; PHPSESSID=hn5gt5nb1j4sfq1j6m40un3it6; language=es
Host:podo.com
If-Modified-Since:Tue, 01 Nov 2011 17:20:59 GMT
Referer:http://podo.com/sheet?id=48
User-Agent:Mozilla/5.0 (X11; Linux i686) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.53 Safari/534.30

响应是:

Cache-Control:max-age=86400, public
Connection:Keep-Alive
Date:Tue, 28 Feb 2012 17:50:04 GMT
Expires:Wed, 29 Feb 2012 17:50:04 GMT
Keep-Alive:timeout=5, max=99
Server:Apache/2.2.15 (Unix) DAV/2 PHP/5.2.10
Vary:Accept-Encoding

我还有以下在任何 JS 文件之前执行的代码:

// Set document header
header('Content-Type: text/javascript; charset=UTF-8');

$expires = ONE_DAY;
header("Pragma: public");
header("Cache-Control: maxage=".$expires);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$expires) . ' GMT');

而且我注意到，如果我注释这些行并重新加载页面(不是通过按 F5，使用导航按钮)，一些(不是全部)Javascript 文件与 CSS 文件具有相同的行为(被强制重新加载)。

这是怎么回事？为什么 CSS 文件从不缓存？为什么 JS 文件有时会被缓存，有时不会？

更新:我发现如果我注释行 和它相应的结束标记，一切都按预期工作，即，不请求 CSS 文件(碰巧与 JS 文件)。现在的问题是:为什么？

更新 2:第一次收到 CSS 文件时的响应 header (200 响应):

Accept-Ranges:bytes
Cache-Control:max-age=86400, public
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:1633
Content-Type:text/css
Date:Thu, 01 Mar 2012 16:01:53 GMT
Expires:Fri, 02 Mar 2012 16:01:53 GMT
Keep-Alive:timeout=5, max=99
Server:Apache/2.2.15 (Unix) DAV/2 PHP/5.2.10
Vary:Accept-Encoding

请求 header 相同。

Answer 1

事实上，它们被缓存了。这里需要注意的重要一点是请求的这一行:

If-Modified-Since: Tue, 01 Nov 2011 17:20:59 GMT

Chrome 要求服务器发送文件的新副本当且仅当自 2011 年 11 月 1 日星期二 17:20:59 GMT.

此处的预期响应将是以下两种情况之一:如果文件已被修改，服务器应在响应正文中返回新版本，并带有 200 OK 响应代码。如果文件没有被修改，服务器应该给出一个 304 Not Modified 响应并且响应的主体将为空 - 如果您查看控制台中显示的响应代码，您会看到这就是正在发生的事情。

有关详细信息，请参阅 this section和 this section RFC2616。

脚注:有趣的是，我以前没有观察到并且我无法轻易解释为什么 private 资源用于重新检查服务器，而 public 资源不是。至少，这是我假设发生的情况，因为您的 JS 文件是直接从缓存中使用的，而您的 CSS 文件不是。