避免 Javascript/Css 缓存答案

【问题标题】：Avoid Javascript/Css caching避免 Javascript/Css 缓存
【发布时间】：2018-10-20 22:37:53
【问题描述】：

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

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

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

我们正在使用 ASP.NET MVC 5、Bootstrap 和 JQuery。一件重要的事情：我们只想避免一些脚本/css 缓存，而不是全部。

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

【问题讨论】：

您是否尝试过使用缓存控制标头 - developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
据我了解，缓存控制标头适用于所有资源，对吧？或者您可以指定要避免缓存哪些资源？
在加载页面时，浏览器会发出多个请求，包括对 html 中包含的 css 和 js 文件的请求。因此，您可以为这些资源返回不同的标头。我不知道你使用的是哪个网络服务器，apache 肯定会让你这样做
但您可以指定不想每次都重新加载哪些资源？我的意思是，我只想重新加载被修改的“app”资源，而不是所有资源。
是的，你可以。这是 htaccess 的一个有用要点，正如您所见，fileMatch 允许您过滤要应用的标头的资源

标签： javascript html css caching

【解决方案1】：

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

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

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

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 重命名为其他任何内容，例如，重命名为 ?no-cache=）。

【讨论】：

是的，你是对的，但是例如我有这个脚本 /assets/global/scripts/sidebar.js?v=636615547606956030 其中 v= 是请求时的当前日期和时间，但是如果我进行更改，我需要在加载更改之前刷新浏览器几次。会不会是浏览器的问题？它发生在本地和我们的客户身上。
@tincho87 如果参数不同，您所描述的在技术上是不可能的。您可能会在资源内部进行更改之前尝试加载资源。
没错！这就是让我感到害怕的原因......我不知道为什么在第一次刷新时没有加载更改。假设如果我更改请求的值，服务器应该返回新文件。
您实际上可以在 Chrome 控制台的 Network 选项卡中检查它是从哪里加载的。我敢肯定你会发现它是从服务器加载的。总是（如果它有唯一的参数）。因此，您的应用程序不是每次都应用它，或者服务器需要一些时间将其保存在资源中，而您在服务器上实际更改它之前请求它。
这很奇怪...有时浏览器加载良好，但有时您必须刷新几次...我会继续调查这个问题。我认为这可能是浏览器问题。