我注意到一些浏览器(特别是Firefox和Opera)非常热衷于使用.css和.js文件的缓存副本，甚至在浏览器会话之间。当您更新其中一个文件时，这会导致一个问题，但用户的浏览器会继续使用缓存的副本。
当文件发生更改时，强迫用户浏览器重新加载文件的最优雅的方法是什么?
理想情况下，该解决方案不会强制浏览器在每次访问页面时重新加载文件。
我发现John Millikin和da5id的建议很有用。这有一个专门的术语:自动版本控制。
我在下面发布了一个新的答案，这是我最初的解决方案和约翰的建议的结合。
SCdF建议的另一个想法是将伪查询字符串附加到文件中。(一些自动使用时间戳作为伪查询字符串的Python代码是由pi..提交的)
然而，关于浏览器是否缓存带有查询字符串的文件还存在一些讨论。(请记住，我们希望浏览器缓存该文件并在以后的访问中使用它。我们只希望它在文件更改时再次获取该文件。)
当前回答
这是一个纯JavaScript解决方案
(function(){
// Match this timestamp with the release of your code
var lastVersioning = Date.UTC(2014, 11, 20, 2, 15, 10);
var lastCacheDateTime = localStorage.getItem('lastCacheDatetime');
if(lastCacheDateTime){
if(lastVersioning > lastCacheDateTime){
var reload = true;
}
}
localStorage.setItem('lastCacheDatetime', Date.now());
if(reload){
location.reload(true);
}
})();
上面将查找用户最后一次访问您的站点的时间。如果最后一次访问是在发布新代码之前，它使用location.reload(true)强制从服务器刷新页面。
我通常把这作为<head>中的第一个脚本，因此它在任何其他内容加载之前进行评估。如果需要重新加载，用户很难注意到。
我使用本地存储来存储浏览器上最后一次访问的时间戳，但是如果您希望支持旧版本的IE，您可以添加cookie。
其他回答
有趣的文章。阅读了这里所有的答案，并结合我从未遇到过任何“伪”查询字符串问题的事实(我不确定为什么每个人都不愿意使用这个)，我猜解决方案(它消除了Apache重写规则的需要，因为在接受的答案)是计算CSS文件内容的短哈希(而不是文件日期时间)作为伪查询字符串。
这将导致以下结果:
<link rel="stylesheet" href="/css/base.css?[hash-here]" type="text/css" />
当然，datetime解决方案也可以在编辑CSS文件的情况下完成工作，但我认为这是关于CSS文件的内容，而不是关于文件datetime，所以为什么要把这些混为一谈呢?
我不知道为什么你们要花这么大的力气来实现这个解决方案。
您所需要做的就是获取文件修改后的时间戳，并将其作为查询字符串附加到文件中。
在PHP中，我会这样做:
<link href="mycss.css?v=<?= filemtime('mycss.css') ?>" rel="stylesheet">
filemtime()是一个PHP函数，返回修改后的文件时间戳。
对于一个2008年左右的网站来说，这30个左右的答案是很好的建议。然而，当涉及到现代的单页应用程序(SPA)时，可能是时候重新考虑一些基本假设了……特别是web服务器只提供文件的单个最新版本是理想的想法。
假设您是一个用户，浏览器中加载了SPA的M版本:
CD管道将应用程序的新版本N部署到服务器上 您在SPA中导航，它向服务器发送一个XMLHttpRequest (XHR)以获取/some.template
(您的浏览器没有刷新页面，所以您仍然在运行版本M)
服务器返回/some的内容。template -你想让它返回模板的版本M还是N ?
如果格式为/some。模板在版本M和N之间发生了变化(或者文件被重命名了等等)，你可能不希望将版本N的模板发送到运行旧版本M解析器的浏览器。†
Web应用程序在满足两个条件时遇到这个问题:
在初始页面加载后的一段时间内异步请求资源 应用程序逻辑假设有关资源内容的事情(在将来的版本中可能会改变)
一旦你的应用程序需要并行提供多个版本，解决缓存和“重新加载”变得微不足道:
将所有site文件安装到versioned目录:/v<release_tag_1>/…files…，/v<release_tag_2>/…files… 设置HTTP头，让浏览器永远缓存文件
(或者更好的是，把所有东西都放在CDN中)
更新所有<script>和<link>标签等，以指向某个版本目录中的该文件
最后一步听起来很棘手，因为它可能需要为服务器端或客户端代码中的每个URL调用URL构建器。或者您可以聪明地使用<base>标记并在一个地方更改当前版本。
†解决这个问题的一种方法是在新版本发布时强制浏览器重新加载所有内容。但是为了让任何正在进行的操作完成，至少并行支持两个版本:v-current和v-previous可能仍然是最简单的。
ASP。NET 4.5及以上版本可以使用脚本捆绑。
The request http://localhost/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81 is for the bundle AllMyScripts and contains a query string pair v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81. The query string v has a value token that is a unique identifier used for caching. As long as the bundle doesn't change, the ASP.NET application will request the AllMyScripts bundle using this token. If any file in the bundle changes, the ASP.NET optimization framework will generate a new token, guaranteeing that browser requests for the bundle will get the latest bundle.
捆绑还有其他好处，包括通过缩小页面来提高首次加载时的性能。
感谢Kip的完美解决方案!
我对它进行了扩展，将其用作Zend_view_Helper。因为我的客户端在虚拟主机上运行他的页面，我也为此扩展了它。
/**
* Extend filepath with timestamp to force browser to
* automatically refresh them if they are updated
*
* This is based on Kip's version, but now
* also works on virtual hosts
* @link http://stackoverflow.com/questions/118884/what-is-an-elegant-way-to-force-browsers-to-reload-cached-css-js-files
*
* Usage:
* - extend your .htaccess file with
* # Route for My_View_Helper_AutoRefreshRewriter
* # which extends files with there timestamp so if these
* # are updated a automatic refresh should occur
* # RewriteRule ^(.*)\.[^.][\d]+\.(css|js)$ $1.$2 [L]
* - then use it in your view script like
* $this->headLink()->appendStylesheet( $this->autoRefreshRewriter($this->cssPath . 'default.css'));
*
*/
class My_View_Helper_AutoRefreshRewriter extends Zend_View_Helper_Abstract {
public function autoRefreshRewriter($filePath) {
if (strpos($filePath, '/') !== 0) {
// Path has no leading '/'
return $filePath;
} elseif (file_exists($_SERVER['DOCUMENT_ROOT'] . $filePath)) {
// File exists under normal path
// so build path based on this
$mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $filePath);
return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $filePath);
} else {
// Fetch directory of index.php file (file from all others are included)
// and get only the directory
$indexFilePath = dirname(current(get_included_files()));
// Check if file exist relativ to index file
if (file_exists($indexFilePath . $filePath)) {
// Get timestamp based on this relativ path
$mtime = filemtime($indexFilePath . $filePath);
// Write generated timestamp to path
// but use old path not the relativ one
return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $filePath);
} else {
return $filePath;
}
}
}
}
