与高速缓存控制串联CSS

Question

好吧，是一个艰难的：

我的这些网站与几个CSS文件使用的缓存清除它工作得很好。每次通话我都得到403 Not Modified。

但我现在用我的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”使用缓存清除。它总是返回“200好”。这些都是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修改的状态。

但是，如果您正在设置到期标题，浏览器只需从本地缓存中提取资产。检查上次修改日期的请求是不必要的，并且不会发送。

Answer 2

我建议你看看html5 boilerplate项目的优良作品，它为您在新项目中开始提供了一个很好的基础。但更重要的是，它包含一个带有良好评论规则的.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