我注意到一些浏览器(特别是Firefox和Opera)非常热衷于使用.css和.js文件的缓存副本，甚至在浏览器会话之间。当您更新其中一个文件时，这会导致一个问题，但用户的浏览器会继续使用缓存的副本。
当文件发生更改时，强迫用户浏览器重新加载文件的最优雅的方法是什么?
理想情况下，该解决方案不会强制浏览器在每次访问页面时重新加载文件。
我发现John Millikin和da5id的建议很有用。这有一个专门的术语:自动版本控制。
我在下面发布了一个新的答案，这是我最初的解决方案和约翰的建议的结合。
SCdF建议的另一个想法是将伪查询字符串附加到文件中。(一些自动使用时间戳作为伪查询字符串的Python代码是由pi..提交的)
然而，关于浏览器是否缓存带有查询字符串的文件还存在一些讨论。(请记住，我们希望浏览器缓存该文件并在以后的访问中使用它。我们只希望它在文件更改时再次获取该文件。)
当前回答
对于Java Servlet环境，可以查看Jawr库。功能页面解释了它是如何处理缓存的:
Jawr will try its best to force your clients to cache the resources. If a browser asks if a file changed, a 304 (not modified) header is sent back with no content. On the other hand, with Jawr you will be 100% sure that new versions of your bundles are downloaded by all clients. Every URL to your resources will include an automatically generated, content-based prefix that changes automatically whenever a resource is updated. Once you deploy a new version, the URL to the bundle will change as well so it will be impossible that a client uses an older, cached version.
该库还可以简化JavaScript和CSS，但如果不需要，可以将其关闭。
其他回答
谷歌的mod_pagespeed插件将为你自动版本控制。它真的很光滑。
它解析HTML在它的方式从web服务器(与PHP, Ruby on Rails, Python，静态HTML -任何)和重写链接到CSS, JavaScript，图像文件，使他们包括一个id代码。它在修改后的url上提供文件，并对它们进行非常长的缓存控制。当文件更改时，它会自动更改url，因此浏览器必须重新获取它们。它基本上可以正常工作，无需对代码进行任何更改。它甚至还会缩小你的代码。
这是一个纯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。
谷歌Chrome浏览器有硬加载以及空缓存和硬加载选项。在“检测模式”下，按住重装按钮可以选择一个。
感谢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;
}
}
}
}
如果您不想让客户端缓存文件，这个解决方案似乎是最快实现的。如果你在footer.php中加载文件，用time()调整部分:
<script src="<?php echo get_template_directory_uri(); ?>/js/main.js?v=<?= time() ?>"></script>
