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

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文件的请求标头是：

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文件？

更新：我发现如果我评论该行＆lt; ifModule mod_expires.c＆gt;并且它对应的结束标记，一切都按预期工作，它是，不要求CSS文件（与JS文件一样）。现在的问题是：为什么？

更新2 ：第一次收到CSS文件时的响应标头（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

请求标题相同。

Answer 1

实际上他们是缓存的。这里要注意的重要一点是请求的这一行：

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

Chrome正在要求服务器发送文件的新副本，当且仅当自Tue, 01 Nov 2011 17:20:59 GMT以来已经修改。

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

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

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