javascript - 避免 Javascript/Css 缓存

Question

我对此进行了很多搜索，但找不到任何真正有效的解决方案:我们正在使用大量随时修改的 javascript/css 文件构建网络应用程序。关键是我们需要客户端的浏览器始终获取最新版本的脚本。

我们尝试添加 GET 查询 (?v=CurrentDate)，但浏览器一直加载旧脚本，直到您点击刷新几次或执行 CTRL+F5。

我们要避免的一件事是将这些文件存储在不同的文件夹中，例如/scripts/v1.0/，然后是/scripts/v2.0/...

我们使用 ASP.NET MVC 5、Bootstrap 和 JQuery。一件重要的事情:我们只想避免某些脚本/css 缓存，而不是所有内容。

非常感谢您的帮助!谢谢!

Answer 1

浏览器缓存是浏览器存储来自远程资源的结果的能力。这个过程相当简单:它会记住请求资源的 url 和响应。如果在缓存资源时再次请求资源，而不是进行调用，浏览器会提供缓存中保存的副本，因为这样可以节省带宽和时间。

如果您向资源调用添加一个始终唯一的参数，浏览器将始终重新加载它，因为参数将被更改并且浏览器将假定它是不同的资源。

通常，以秒(php 时间戳)或毫秒(javascript 时间戳)为单位的时间戳 将确保您的资源始终被重新加载:

JavaScript:

<script src id="myScript"></script>
<script type="text/javascript">
   // change path to match your file:
   let resourcePath = '/js/someScript.js';

   document.getElementById('myScript').src = resourcePath + '?v=' + Date.now();
</script>

PhP:

<script src="/js/someScript.js?v=<?=time();?>"></script>

注意:您可以对任何其他资源(.css 或媒体资源)执行相同操作以禁用缓存。另请注意，从技术上讲，您并没有禁用缓存——这不是那么容易做到，并且因浏览器而异。您允许缓存，但您总是请求不同的资源，因为它具有不断变化的伪造参数(并且可以将其从 v 重命名为其他任何内容，例如 ?无缓存=)。