帮助积极的JavaScript缓存

Question

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

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

这是一个Web服务器配置吗？我是否需要将JavaScript文件设置为永不缓存？我在Google Web Toolkit中看到了一些有趣的技术，他们在进行更新时实际创建了一个新的 JavaScript文件名。我相信这是为了防止代理和浏览器保留旧版本的JavaScript文件具有相同的名称。

某处有最佳做法清单吗？

Answer 1

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

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

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

这有一个额外的好处，你可以设置HTTP标题，意思是“永不缓存！”

Answer 2

  

它保留在浏览器中缓存的副本中，即使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标头的到期日期之前。 当我说永远不会，我的意思是 - 浏览器甚至不会询问的新版本;它只是假设它的缓存版本很好，直到客户端清除缓存，或者缓存达到到期日期。 Yahoo指出，当需要刷新这些资源时，他们会更改这些资源的文件名。

     

这里真正保存的是客户端为新版本ping服务器的成本，并且在资源未更改的常见情况下获得304未修改的头。这不是太多开销......除非你是雅虎。当然，如果您有一组几乎永远不会改变的图像或脚本，请务必利用客户端缓存并打开Cache-Control标头。缓存对浏览器性能至关重要;每个Web开发人员都应该深入了解HTTP缓存的工作原理。但只能以外科手术，有限的方式使用它来处理那些可以受益的特定文件夹或文件。对于其他任何事情，风险都超过了收益。当然，您不希望将整个网站作为一揽子默认设置打开..除非您希望每次内容更改时都更改文件名。

Answer 3

@Jason和Darren

IE6 将查询字符串视为无法缓存。您应该找到另一种方法将版本号输入到URL中，例如假目录：

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

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

编辑：抱歉全部;不是用查询字符串缓存的是Squid，而不是IE6。更多信息here。

Answer 4

我写过一篇关于我们如何克服这个问题的博文：

Avoiding JavaScript and CSS Stylesheet Caching Problems in ASP.NET

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

Answer 5

我也是重命名事物的方法。它永远不会失败，而且相当容易。

Answer 6

您的网络服务器是否发送了正确的标题，告诉浏览器它有新版本？我之前也在查询字符串中添加了日期。即myscripts.js？date = 4/14/2008 12:45:03（只有日期会被编码）

Answer 7

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

@Chris好小费。我认为查询字符串方法很好，但听起来像一个唯一的文件或目录名称是必要的，以涵盖所有情况。

Answer 8

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

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

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

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

Answer 9

here中的一些非常有用的技术，即使您不打算使用PowerShell来自动部署。

Answer 10

对于它的价值，我看到了deviantART站点，相当大的站点，为他们的JS文件提供54504.js。我刚刚查看并看到他们现在将它们作为v6core.css服务？-5855446573 v6core_jc.js？4150339741等。

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