如何正确设置css/js静态缓存

Question

为了防止出现问题,当我更新CSS/JS媒体文件和浏览器不要求新版本时,因为他们使用这个解决方案来缓存这些文件:https://github.com/jaddison/django-cachebuster,它会添加？<文件的时间戳>到CSS/JS文件名(用/media/main.css?20012931203128替换/media/main.css.我假设它会强制浏览器在更改时间戳(文件更新)时重新加载css文件并使用本地缓存版本但是我在Apache日志(以及firebug)中看到的是浏览器(至少是Firefox)为每次重新加载页面请求CSS/JS文件,即使在获得304代码之后,请参阅日志中的片段:

XXX.255.115.60 - - [24/Jul/2011:04:17:25 -0700] "GET /media/main.css?333900240611 HTTP/1.1" 304 172 "" "Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"
XXX.255.115.60 - - [24/Jul/2011:04:17:26 -0700] "GET /media/main.js?270101180511 HTTP/1.1" 304 173 "" "Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"
XXX.255.115.60 - - [24/Jul/2011:04:17:34 -0700] "GET /media/main.css?333900240611 HTTP/1.1" 304 172 "" "Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"
XXX.255.115.60 - - [24/Jul/2011:04:17:35 -0700] "GET /media/main.js?270101180511 HTTP/1.1" 304 173 "" "Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"
XXX.255.115.60 - - [24/Jul/2011:04:17:44 -0700] "GET /media/main.css?333900240611 HTTP/1.1" 304 172 "" "Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"
XXX.255.115.60 - - [24/Jul/2011:04:17:44 -0700] "GET /media/main.js?270101180511 HTTP/1.1" 304 173 "" "Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"

当然,它使我的网站变慢.是否可以强制浏览器仅在.css？...之后的时间戳更改时更新文件？谢谢!

Upd: 以下是响应和请求的示例:

请求

User-Agent  Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.2.18) Gecko/20110614 Firefox/3.6.18
Accept  text/css,*/*;q=0.1
Accept-Language en-gb,en;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset  ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive  115
Referer 
DNT 1
Connection  keep-alive
If-Modified-Since   Fri, 24 Jun 2011 05:39:33 GMT
If-None-Match   "8ed02f1-a21-4a66ea04f2f40"

响应

Date    Sun, 24 Jul 2011 12:28:21 GMT
Server  Apache
Connection  Keep-Alive
Keep-Alive  timeout=2, max=99
Etag    "8ed02f1-a21-4a66ea04f2f40"

最初的

Date    Sun, 24 Jul 2011 12:51:05 GMT
Server  Apache
Last-Modified   Fri, 24 Jun 2011 05:39:33 GMT
Etag    "8ed02f1-a21-4a66ea04f2f40"
Accept-Ranges   bytes
Content-Length  2593
Keep-Alive  timeout=2, max=99
Connection  Keep-Alive
Content-Type    text/css

Answer 1

您应该使用正确的HTTP缓存指令使响应永不过期(将来一年):

Cache-Control: max-age=31536000
Expires: Sun, 24 Jul 2012 12:51:05 GMT

您可以使用mod_expires在Apache中执行此操作:

ExpiresByType text/css "now plus 1 year"
ExpiresByType text/javascript "now plus 1 year"