如何强制浏览器重新加载缓存的CSS / JS文件？ [英] How to force browser to reload cached CSS/JS files?

问题描述

我注意到，某些浏览器（特别是Firefox和Opera）非常热衷于使用 .css 和 .js 文件的缓存副本，即使在浏览器会话之间。这会导致在您更新其中一个文件时出现问题，但用户的浏览器仍在使用缓存的副本。

I have noticed that some browsers (in particular, Firefox and Opera) are very zealous in using cached copies of .css and .js files, even between browser sessions. This leads to a problem when you update one of these files but the user's browser keeps on using the cached copy.

问题是：什么是最优雅的强制用户的浏览器在文件更改时重新加载文件？

The question is: what is the most elegant way of forcing the user's browser to reload the file when it has changed?

理想情况下，该解决方案不会强制浏览器在每次访问页面时重新加载文件。我会发布自己的解决方案作为答案，但我很好奇，如果有人有更好的解决方案，我会让你的投票决定。

Ideally the solution would not force the browser to reload the file on every visit to the page. I will post my own solution as an answer, but I am curious if anyone has a better solution and I'll let your votes decide.

更新： / strong>

Update:

在此讨论一段时间后，我发现了 John Millikin 和 da5id 的建议有用。原来，这里有一个术语：自动版本。

After allowing discussion here for a while, I have found John Millikin and da5id's suggestion to be useful. It turns out there is a term for this: auto-versioning.

我发布了一个新的答案，解决方案和John的建议。

I have posted a new answer below which is a combination of my original solution and John's suggestion.

SCdF 建议的另一个想法是在文件中附加一个伪造的查询字符串。 （某些Python代码自动使用时间戳作为伪造的查询字符串由 pi 提交。）。然而，有一些讨论，关于浏览器是否将缓存具有查询字符串的文件。 （记住，我们希望浏览器缓存该文件并在以后访问时使用它。我们只希望在更改后再次抓取该文件。）

Another idea which was suggested by SCdF would be to append a bogus query string to the file. (Some Python code to automatically use the timestamp as a bogus query string was submitted by pi.). However, there is some discussion as to whether or not the browser would cache a file with a query string. (Remember, we want the browser to cache the file and use it on future visits. We only want it to fetch the file again when it has changed.)

推荐答案

更新：

Update: Rewritten to incorporate suggestions from John Millikin and da5id. This solution is written in PHP, but should be easily adapted to other languages.

更新2：纳入来自 Nick Johnson的评论，原始的 .htaccess regex可能会导致像 json-1.3.js 文件的问题。解决方案是只有重写，如果有正好10位数字在结束。 （因为10位数字涵盖从9/9/2001到11/20/2286的所有时间戳。）

Update 2: Incorporating comments from Nick Johnson that the original .htaccess regex can cause problems with files like json-1.3.js. Solution is to only rewrite if there are exactly 10 digits at the end. (Because 10 digits covers all timestamps from 9/9/2001 to 11/20/2286.)

首先，在.htaccess中使用以下重写规则：

First, we use the following rewrite rule in .htaccess:

RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]

现在，我们编写以下PHP函数：

Now, we write the following PHP function:

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *  
 *  @param $file  The file to be loaded.  Must be an absolute path (i.e.
 *                starting with slash).
 */
function auto_version($file)
{
  if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
    return $file;

  $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
  return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

现在，无论你包含你的CSS，改变它：

Now, wherever you include your CSS, change it from this:

<link rel="stylesheet" href="/css/base.css" type="text/css" />

到此：

<link rel="stylesheet" href="<?php echo auto_version('/css/base.css'); ?>" type="text/css" />

这样，您就不必再次修改链接标记，用户将始终看到最新的CSS。浏览器将能够缓存CSS文件，但是当您对CSS进行任何更改时，浏览器会将此作为新的URL，因此不会使用缓存的副本。

This way, you never have to modify the link tag again, and the user will always see the latest CSS. The browser will be able to cache the CSS file, but when you make any changes to your CSS the browser will see this as a new URL, so it won't use the cached copy.

这也可以使用图像，favicon和JavaScript。基本上不是动态生成的。

This can also work with images, favicons, and JavaScript. Basically anything that is not dynamically generated.

这篇关于如何强制浏览器重新加载缓存的CSS / JS文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！