连接CSS与缓存控制

Question

好的，这是一个比较难的问题:

我有这些网站的几个CSS文件，使用缓存破坏，它工作得很好。我每次打电话都收到403未修改。

但是现在我在我的htaccess中使用这个规则来连接我所有的文件

<FilesMatch ".combined.css$">
  Options +Includes
  AddOutputFilterByType INCLUDES text/css
  SetOutputFilter INCLUDES
</FilesMatch>

在script.combined.css中可以看到:

<!--#include file="file1.css" -->
<!--#include file="file2.css" -->

问题来了，即使我的文件"script.combined.css"使用缓存破坏。它总是返回"200ok"。这些是script.combined.css:

的头文件

Request
URL:http://XXX/css/script.combined.css
Request Method:GET
Status Code:200 OK
Request Headers
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:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Cookie:typo3-login-cookiecheck=true; PHPSESSID=2evc53ngjjobateti38gpahtt7; tx_phpmyadmin=quf4sgevagubd1snd9eoq4g4d0; be_typo_user=0f4c7e291b6d7673310d6f15da687910; Typo3InstallTool=62erpih8fmqbbl3pe75pcenuu0; fe_typo_user=a7e5de71521603161fa598ed523b024b
Host:XXX
Referer:http://XXX/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.30 (KHTML, like Gecko) Ubuntu/11.04 Chromium/12.0.742.112 Chrome/12.0.742.112 Safari/534.30
Response Headers
Accept-Ranges:bytes
Cache-Control:max-age=31536000, public
Connection:Keep-Alive
Content-Type:text/css
Date:Wed, 17 Aug 2011 13:56:42 GMT
Expires:Thu, 16 Aug 2012 13:56:42 GMT
Keep-Alive:timeout=5, max=99
Server:HTTPD
Transfer-Encoding:chunked

…下面是另一个简单CSS文件的头文件:

Request URL:http://XXX/css/style.css
Request Method:GET
Status Code:304 Not Modified
Request Headers
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:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Cookie:typo3-login-cookiecheck=true; PHPSESSID=2evc53ngjjobateti38gpahtt7; tx_phpmyadmin=quf4sgevagubd1snd9eoq4g4d0; be_typo_user=0f4c7e291b6d7673310d6f15da687910; Typo3InstallTool=62erpih8fmqbbl3pe75pcenuu0; fe_typo_user=a7e5de71521603161fa598ed523b024b
Host:XXX
If-Modified-Since:Wed, 17 Aug 2011 11:45:17 GMT
Referer:http://XXX/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.30 (KHTML, like Gecko) Ubuntu/11.04 Chromium/12.0.742.112 Chrome/12.0.742.112 Safari/534.30
Response Headers
Cache-Control:max-age=31536000, public
Connection:Keep-Alive
Date:Wed, 17 Aug 2011 13:56:42 GMT
Expires:Thu, 16 Aug 2012 13:56:42 GMT
Keep-Alive:timeout=5, max=97
Server:HTTPD

我使用了一个扩展来衡量谷歌的页面速度，我得到了这个消息:

指定缓存验证器

以下资源缺少缓存验证器。资源,不要指定不能有效刷新的缓存验证器。指定Last-Modified或ETag头以启用缓存验证以下资源:

http://XXX/css/script.combined.css?1313583214

我该怎么办??

Answer 1

根据Apache的服务器端文档包括:

在默认配置中，Apache不会在SSI页面上发送最后修改的日期或内容长度HTTP头，因为这些值很难计算动态内容。

http://httpd.apache.org/docs/1.3/howto/ssi.html

因此，在浏览器中直接请求styles.combined.css将永远不会返回304 Not Modified状态。

但是如果你设置了expires headers，浏览器只会从本地缓存中提取资源。检查最后修改日期的请求是不必要的，并且不会被发送。

Answer 2

我建议你看一下html5样板项目的出色工作，它为你在新项目中开始提供了一个很好的基础。但更重要的是，它包含了一个带有注释规则的.htaccess文件。

下面的代码片段可能对你特别有用:

# ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------
# These are pretty far-future expires headers.
# They assume you control versioning with cachebusting query params like
#   <script src="application.js?20100608">
# Additionally, consider that outdated proxies may miscache 
#   www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
# If you don't use filenames to version, lower the CSS  and JS to something like
#   "access plus 1 week" or so.
<IfModule mod_expires.c>
  ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                          "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"
# Your document html 
  ExpiresByType text/html                 "access plus 0 seconds"
# Data
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"
# Feed
  ExpiresByType application/rss+xml       "access plus 1 hour"
  ExpiresByType application/atom+xml      "access plus 1 hour"
# Favicon (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 1 week" 
# Media: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"
# HTC files  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"
# Webfonts
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"
  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>
</IfModule>

# ----------------------------------------------------------------------
# ETag removal
# ----------------------------------------------------------------------
# FileETag None is not enough for every server.
<IfModule mod_headers.c>
  Header unset ETag
</IfModule>
# Since we're sending far-future expires, we don't need ETags for
# static content.
#   developer.yahoo.com/performance/rules.html#etags
FileETag None