Answers:
参数?v=1.123
表示查询字符串,因此浏览器将认为这是从到的新路径?v=1.0
。因此导致它从文件而不是从缓存加载。如你所愿。
并且,浏览器将假定下次调用时源将保持不变,?v=1.123
并应使用该字符串对其进行缓存。因此它将保留在缓存中,但是服务器已设置,直到您移动到?v=1.124
诸如此类。
<link rel="stylesheet" href="style.css?v=1487935578" />
两个问题:这会有效地打破缓存吗?
是。甚至Stack Overflow都使用这种方法,尽管我记得他们(每天有数百万的访问者,以及数以百万计的不同客户端和代理版本和配置)也有一些异常情况,即使这样也不足以破坏缓存。但是一般的假设是这将起作用,并且是打破客户端缓存的合适方法。
由于参数表明这是动态内容,因此该参数会导致浏览器从不缓存该URL的响应吗?
否。该参数将不会更改缓存策略;它不会更改缓存策略。服务器发送的缓存头仍然适用,如果不发送,则为浏览器的默认值。
/static/v22/file.css
,你可以做一个单一的文件夹重命名,例如多个文件 /static/v23/file.css
和/static/v23/mystuff.js
将版本号放在实际文件名中比较安全。这允许一次存在多个版本,因此您可以推出一个新版本,如果仍然存在请求较早版本的缓存HTML页面,则它们将获得与其HTML兼容的版本。
注意,在Internet上最大的版本化部署之一中,jQuery使用实际文件名中的版本号,并且可以安全地允许多个版本共存,而无需任何特殊的服务器端逻辑(每个版本只是一个不同的文件)。
当您部署新页面和新链接文件(这就是您想要的)时,这将破坏一次缓存,然后可以有效地缓存(您也想要的)那些版本。
正如其他人所说,使用查询参数进行缓存清除通常被认为是一个坏主意(tm),并且已经存在了很长时间。最好在文件名中反映版本。建议不要使用Html5 Boilerplate等查询字符串。
也就是说,在我看到的引用了消息来源的建议中,所有建议似乎都取材于Steve Souders 在2008年的一篇文章中。他的结论基于当时的代理行为,这些天可能相关也可能不相关。但是,在没有更多最新信息的情况下,更改文件名是安全的选择。
这在很大程度上取决于您希望缓存具有多强的功能。例如,鱿鱼代理服务器(可能还有其他)默认情况下不缓存带有查询字符串的URL-至少在撰写该文章时确实如此。如果您不介意某些用例会导致不必要的缓存未命中,请继续使用查询参数。但是,设置基于文件名的缓存清除方案非常容易,这样可以避免此问题。
另一种类 似的方法是在提供文件时使用htaccess mod_rewrite忽略部分路径。您永不缓存的索引页引用了文件的最新路径。
从开发角度来看,使用参数作为版本号是一样容易,但它与文件名方法一样强大。
使用路径的被忽略部分作为版本号,服务器将忽略它并提供未缓存的文件。
1.2.3/css/styles.css
css/styles.css
由于htaccess文件剥离并忽略了第一个目录,因此提供的文件相同
<?php
$version = "1.2.3";
?>
<html>
<head>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" type="text/css" href="<?php echo $version ?>/css/styles.css">
</head>
<body>
<script src="<?php echo $version ?>/js/main.js"></script>
</body>
</html>
请注意,这种方法意味着您需要禁用索引页的缓存- 使用<meta>标记来关闭所有浏览器的缓存?
RewriteEngine On
# if you're requesting a file that exists, do nothing
RewriteCond %{REQUEST_FILENAME} !-f
# likewise if a directory that exists, do nothing
RewriteCond %{REQUEST_FILENAME} !-d
# otherwise, rewrite foo/bar/baz to bar/baz - ignore the first directory
RewriteRule ^[^/]+/(.+)$ $1 [L]
您可以在允许URL重写的任何服务器平台上采用相同的方法
(重写条件改编自mod_rewrite-将目录重写为查询字符串,但/#!/除外)
...,如果您的索引页/站点入口点需要缓存清除,则可以始终使用JavaSript刷新它。
<script type="text/javascript">
// front end cache bust
var cacheBust = ['js/StrUtil.js', 'js/protos.common.js', 'js/conf.js', 'bootstrap_ECP/js/init.js'];
for (i=0; i < cacheBust.length; i++){
var el = document.createElement('script');
el.src = cacheBust[i]+"?v=" + Math.random();
document.getElementsByTagName('head')[0].appendChild(el);
}
</script>
<script>
var storedSrcElements = [
"js/exampleFile.js",
"js/sampleFile.js",
"css/style.css"
];
var head= document.getElementsByTagName('head')[0];
var script;
var link;
var versionNumberNew = 4.6;
for(i=0;i<storedSrcElements.length;i++){
script= document.createElement('script');
script.type= 'text/javascript';
script.src= storedSrcElements[i] + "?" + versionNumberNew;
head.appendChild(script);
}
</script>
### Change the version number (versionNumberNew) when you want the new files to be loaded ###
希望这可以帮助您注入外部JS文件
<script type="text/javascript">
var cachebuster = Math.round(new Date().getTime() / 1000);
document.write('<scr'+'ipt type="text/javascript" src="external.js?cb=' +cachebuster+'"></scr' + 'ipt>');
</script>