帮助进行积极的 JavaScript 缓存

StackOverflow https://stackoverflow.com/questions/54475

  •  09-06-2019
  •  | 
  •  

题

我遇到了一个问题，我对 HTML 文件中引用的一些 JavaScript 文件进行了更改，但浏览器看不到这些更改。即使 Web 服务器有较新的版本，它也会保留浏览器中缓存的副本。

直到我强制浏览器清除缓存，我才能看到更改。

这是网络服务器配置吗？我需要将 JavaScript 文件设置为从不缓存吗？我在其中看到了一些有趣的技术 谷歌网络工具包 他们实际上创造了一个 新的 任何更新时的 JavaScript 文件名。我相信这是为了防止代理和浏览器保留旧版本的 JavaScript 文件具有相同的名称。

某处是否有最佳实践列表？

有帮助吗？

解决方案

我们将产品版本号附加到所有 Javascript（和 CSS 等）的末尾，如下所示：

<script src="MyScript.js?4.0.8243">

浏览器会忽略问号后面的所有内容，但升级会导致新的 URL，这意味着缓存重新加载。

这样做的另一个好处是您可以设置表示“从不缓存！”的 HTTP 标头。

其他提示

即使 Web 服务器有较新的版本，它也会保留浏览器中缓存的副本。

这可能是因为设置了 HTTP Expires / Cache-Control 标头。

http://developer.yahoo.com/performance/rules.html#expires

我在这里写过这个：

http://www.codinghorror.com/blog/archives/000932.html

这本身并不是一个坏建议，但如果你错了，它可能会导致巨大的问题。例如，在 Microsoft 的 IIS 中，Expires 标头在默认情况下始终处于关闭状态，可能正是出于这个原因。通过在 HTTP 资源上设置 Expires 标头，您可以告诉客户端 从不检查该资源的新版本 -- 至少在 Expires 标头上的到期日期之前不会。 当我说从不时，我是认真的——浏览器甚至不会 问 对于新版本；它只会假设其缓存版本是好的，直到客户端清除缓存或缓存达到到期日期为止。 雅虎指出，当需要刷新这些资源时，他们会更改这些资源的文件名。

这里真正节省的只是客户端 ping 服务器获取新版本的成本，以及在资源未更改的常见情况下返回 304 未修改标头的成本。这开销也不算大吧。。除非你是雅虎。当然，如果您有一组几乎从不更改的图像或脚本，那么一定要利用客户端缓存并打开 Cache-Control 标头。缓存对于浏览器性能至关重要；每个 Web 开发人员都应该深入了解 HTTP 缓存的工作原理。但只能以外科手术式的、有限的方式使用它，以用于那些可以受益的特定文件夹或文件。对于其他任何事情，风险都大于收益。您当然不希望将其作为整个网站的全面默认设置。除非您喜欢每次内容更改时都更改文件名。

@杰森和达伦

IE6 将带有查询字符串的任何内容视为不可缓存。你应该找到另一种方法将版本号放入 url 中，例如假目录：

<script src="/js/version/MyScript.js"/>

并在完成请求之前删除服务器端 js 之后的第一个目录级别。

编辑：对不起大家；Squid，而不是IE6，不会缓存查询字符串。更多信息 这里.

我在这里写了一篇关于我们如何克服这个问题的博客文章：

避免 ASP.NET 中的 JavaScript 和 CSS 样式表缓存问题

基本上，在开发过程中，您可以在 CSS 文件的文件名后面添加一个随机数到查询字符串中。当您进行发布构建时，代码将切换为使用程序集的修订号。这意味着在您的生产环境中，您的客户端可以缓存样式表，但每当您发布网站的新版本时，他们将被迫重新加载文件。

我也喜欢只重命名的方法。它永远不会失败，而且相当容易做到。

您的网络服务器是否发送正确的标头来告诉浏览器它有新版本？我之前也将日期添加到查询字符串中。即 myscripts.js?date=4/14/2008 12:45:03 （仅对日期进行编码）

@Darren IIS 6 和 Apache 2 上都出现了缓存问题。我不确定正确的解决方案是否是修改 HTTP 响应标头，而是采用此处一些响应中描述的重命名路线。

@Chris 好提示。我认为查询字符串方法是一种很好的方法，但听起来需要一个唯一的文件或目录名来覆盖所有情况。

在每个版本中，我们只需在所有静态资源的根路径前添加一个单调递增的整数，这会强制客户端重新加载（我们之前已经在 IE6 中看到过查询字符串方法中断）。例如：

  • 版本 1：http://www.foo.com/1/js/foo.js
  • 版本 2：http://www.foo.com/2/js/foo.js

它需要在每个版本中重新调整链接，但我们已经构建了自动将链接更改为我们的部署工具的功能。

完成此操作后，您可以使用 Expires/Cache-Control 标头，让客户端“永远”缓存 JS 资源，因为路径会随着每个版本的变化而变化，我认为这就是 @JasonCohen 的目的。

一些非常有用的技术 这里 即使您不打算使用 powershell 来自动部署。

对于它的价值，我看到了 异常ART 网站，相当大的一个，其 JS 文件为 54504.js。我刚刚检查了一下，发现他们现在将它们作为 v6core.css?-5855446573 v6core_jc.js?4150339741 等提供。

如果查询字符串的问题来自服务器，我想你或多或少可以控制它。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top