Question

为了防止出现问题，当我更新CSS / JS媒体文件和浏览器时不要求新版本，因为他们使用这个解决方案来缓存这些文件：https://github.com/jaddison/django-cachebuster，它添加了？＆lt;文件的时间戳＆gt;到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： 这是一个响应＆amp;的例子。请求：

请求

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 caching指令来制作回复never expire（将来一年）：

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"

Answer 2

我玩了很多，我发现它可能是由 Apache bug 引起的。这不是浏览器的问题 - 一旦timeatmp在查询字符串中，浏览器就不理解查询字符串，并且必须至少询问服务器它是否未更改。 Apache以'304 Not modified'响应良好，但它总是发送文件！

我做了很多实验，唯一有效的解决方案就是将时间戳直接放到文件名。在PHP中，我使用以下函数：

function safe_inline_url($file)
{

     $basename = basename($file);
     if (strstr($basename, '.'))
          return dirname($file) . "/" .
               preg_replace('/(\.[^\.]*)$/', '_ts_' . filemtime($file) . '\1',
                    $basename);
     else 
          return $file . '_ts_' . filemtime($file);

}

修改任何内联URL（css，js，images，...），以便添加时间戳，例如。喜欢 js / forms.js =＆gt; js / forms_ts_1278080148.js 。

在服务器上，您必须将修改后的文件名重写为真实姓名，这可以通过将其放入.htaccess文件来完成：

RewriteEngine On

RewriteCond %{REQUEST_URI}      ^(.*)_ts_[0-9]{9,}$
RewriteRule ^                   %1      [PT]

RewriteCond %{REQUEST_URI}      ^(.*)_ts_[0-9]{9,}\.(.*)$
RewriteRule ^                   %1.%2   [PT]

你把它放到根目录，你也必须把它放到每个子目录的.htaccess和RewriteEngine On 。

唯一的问题是使用scriptaculous javascript库，它使用URL来包含其他来源 - 你不能使用这个技巧来包含他们的js文件。

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

2 个答案: