如何设置对CSS / JS静态缓存正确 [英] How to set up caching for css/js static properly
问题描述
要prevent问题，当我更新的CSS / JS的媒体文件和浏览器不请求新的版本，因为他们缓存这些文件我用这个解决方案：的 https://github.com/jaddison/django-cachebuster ，，增加了＆LT;文件＆gt时间戳;为CSS / JS文件名（替换用/media/main.css /media/main.css?20012931203128。我认为当时间戳改变了它会迫使浏览器重新加载CSS文件（文件更新）和其它使用本地缓存的版本。如此，但我在Apache日志看（和萤火虫）是浏览器（至少Firefox）的请求CSS / JS文件页面的每个重载，甚至得到304 code后，看到日志片段：
XXX.255.115.60 - - [24 /七月/ 2011：04：17：25 -0700]GET /media/main.css?333900240611 HTTP / 1.1304 172 Mozilla的/ 5.0（Windows NT的5.1; RV：2.0.1）的Gecko / 20100101火狐/ 4.0.1
XXX.255.115.60 - - [24 /七月/ 2011：04：17：26 -0700]GET /media/main.js?270101180511 HTTP / 1.1304 173Mozilla的/ 5.0（Windows NT的5.1; RV ：2.0.1）的Gecko / 20100101火狐/ 4.0.1
XXX.255.115.60 - - [24 /七月/ 2011：04：17：34 -0700]GET /media/main.css?333900240611 HTTP / 1.1304 172Mozilla的/ 5.0（Windows NT的5.1; RV ：2.0.1）的Gecko / 20100101火狐/ 4.0.1
XXX.255.115.60 - - [24 /七月/ 2011：04：17：35 -0700]GET /media/main.js?270101180511 HTTP / 1.1304 173Mozilla的/ 5.0（Windows NT的5.1; RV ：2.0.1）的Gecko / 20100101火狐/ 4.0.1
XXX.255.115.60 - - [24 /七月/ 2011：04：17：44 -0700]GET /media/main.css?333900240611 HTTP / 1.1304 172Mozilla的/ 5.0（Windows NT的5.1; RV ：2.0.1）的Gecko / 20100101火狐/ 4.0.1
XXX.255.115.60 - - [24 /七月/ 2011：04：17：44 -0700]GET /media/main.js?270101180511 HTTP / 1.1304 173Mozilla的/ 5.0（Windows NT的5.1; RV ：2.0.1）的Gecko / 20100101火狐/ 4.0.1
当然，它使我的网站速度较慢。是否有可能迫使浏览器只当的.css后时间戳？......改变为更新文件？
谢谢！
UPD：
下面是响应＆放大器的一个例子;要求：
请求
的User-Agent的Mozilla / 5.0（视窗; U; Windows NT的5.1; EN-GB; RV：1.9.2.18）的Gecko / 20110614火狐/ 3.6.18
接受文/ CSS，* / *; Q = 0.1
接受语言EN-GB，连接; Q = 0.5
接受编码gzip的，放气
接收字符集ISO-8859-1，UTF-8，Q = 0.7 *; Q = 0.7
保持活动115
引用者
DNT 1
连接保持
如果-Modified-Since的星期五，2011 6月24日5时39分33秒GMT
如果 - 无 - 匹配8ed02f1-a21-4a66ea04f2f40
响应
日期星期日，2011年7月24日12时28分21秒GMT
阿帕奇服务器
连接保持
保持活动超时= 2，最多= 99
Etag的8ed02f1-a21-4a66ea04f2f40
初始RESP
日期星期日，2011年7月24日12时51分05秒GMT
阿帕奇服务器
最后修改周五，2011年6月24日5点39分33秒GMT
Etag的8ed02f1-a21-4a66ea04f2f40
接受-范围字节
内容长度2593
保持活动超时= 2，最多= 99
连接保持
内容类型的文本/ CSS
您应该用适当的 HTTP缓存指令作出响应永不过期（一年以后）：
缓存控制：最大年龄= 31536000
过期：孙老师，2012年7月24日12时51分05秒GMT
您可以做到这一点在Apache中指定mod_expires ：
ExpiresByType文/ CSS现在加1年
ExpiresByType文/ JavaScript的现在加1年
to prevent problem, when I update CSS/JS media files and browsers dont request new version, because they cache these files I used this solution: https://github.com/jaddison/django-cachebuster, that adds ?<timestamp of file> to CSS/JS filenames (replaces /media/main.css with /media/main.css?20012931203128. I assumed that it will force browsers to reload css file when timestamp is changed (file is updated) and use local cached version in other case. But what I see in Apache logs (and at firebug) is that browsers (at least Firefox) requests CSS/JS files for each reload of the page, even after getting 304 code, see fragment from logs:
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"
Of course, it makes my website slower. Is it possible to force browsers to update files only when timestamp after .css?... is changed? Thanks!
Upd: Here is an example of response & request:
Request
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"
Response
Date Sun, 24 Jul 2011 12:28:21 GMT
Server Apache
Connection Keep-Alive
Keep-Alive timeout=2, max=99
Etag "8ed02f1-a21-4a66ea04f2f40"
Initial resp
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
You should use proper HTTP caching directives to make the responses never expire (one year in future):
Cache-Control: max-age=31536000
Expires: Sun, 24 Jul 2012 12:51:05 GMT
You can do this in Apache with mod_expires:
ExpiresByType text/css "now plus 1 year"
ExpiresByType text/javascript "now plus 1 year"
这篇关于如何设置对CSS / JS静态缓存正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
