从 CDN 加载 JS 文件，如何防止浏览器缓存

Loading a JS file from a CDN, how to prevent browser caching?

本文关键字：何防止 浏览器 缓存 文件 CDN 加载 JS      更新时间：2023-09-26

每隔几个小时（或更短，取决于）我将更新一个javascript文件，该文件将包含一个JSON对象，其中包含将出现在网站上的通知。 这个 JSON 对象是我将定期更新的对象，因此浏览器无法缓存它。

javascript将托管在CDN上，此文件将托管在客户端网站上，例如：

<script src="//example.com/1.7.1/my_file.js"></script>

在这种情况下，如何防止浏览器缓存？

我想最好的方法是让所有客户端都有相同的 javascript 文件，然后发出 ajax 请求来下拉消息？ 这样就可以缓存"my_file.js"，但 ajax 响应不会缓存。

您可以在路径后添加时间戳my_file.js？time=currentTime

为了保持HTML干净，你可以在另一个本地js文件中添加这样的东西

$("head").append('<script type="text/javascript" src="yourPath?time=' + Date.now() + '"></script>');

或者你可以使用 $.getScript、requirejs 等。

这实际上取决于您使用的 CDN 和可用的功能。一些方法：

  • 指示 CDN 将文件缓存大约一个小时，这样它就会每小时自动获取一个新文件（假设有人在请求）。这意味着用户不一定会立即收到更改，但会在您更改后的半小时内收到更改。
  • 除此之外，让 CDN 向最终用户发送"无缓存"缓存控制标头。根据 CDN，这只是您的源发送的内容，并且您在 CDN 上使用一些覆盖（或指示 CDN 通过标头缓存它的各种方法之一，例如代理缓存控制）
  • 或者，上述版本控制/带时间戳的 URL。这样做的缺点是，它要求您更新对文件的任何引用以包含版本 ID。如果您的页面是自动生成的，这很好。
  • 允许 CDN 无限期缓存文件，但利用"清除"或"失效"功能强制 CDN 在下次请求新版本时请求新版本。这主要适用于有理由让文件超过几个小时或一天不更新的情况。
相关文章：