與高速緩存控制串聯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