积极的JavaScript缓存

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

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

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

某处是否有最佳做法列表？

---

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

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

这还有一个好处，就是您可以设置表示"永不缓存！"的HTTP标头。

---

It holds onto the copy cached in the browser, even though the web server has a newer version.

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

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

我在这里写过：

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

This isn't bad advice, per se, but it can cause huge problems if you get it wrong. In Microsoft's IIS, for example, the Expires header is always turned off by default, probably for that very reason. By setting an Expires header on HTTP resources, you're telling the client to never check for new versions of that resource -- at least not until the expiration date on the Expires header. When I say never, I mean it -- the browser won't even ask for a new version; it'll just assume its cached version is good to go until the client clears the cache, or the cache reaches the expiration date. Yahoo notes that they change the filename of these resources when they need them refreshed.

All you're really saving here is the cost of the client pinging the server for a new version and getting a 304 not modified header back in the common case that the resource hasn't changed. That's not much overhead.. unless you're Yahoo. Sure, if you have a set of images or scripts that almost never change, definitely exploit client caching and turn on the Cache-Control header. Caching is critical to browser performance; every web developer should have a deep understanding of how HTTP caching works. But only use it in a surgical, limited way for those specific folders or files that can benefit. For anything else, the risk outweighs the benefit. It's certainly not something you want turned on as a blanket default for your entire website.. unless you like changing filenames every time the content changes.

---

我已经写了一篇关于我们如何克服此问题的博客文章：

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

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

---

@Jason和Darren

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

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

，只需在执行请求之前在服务器端删除js之后的第一个目录级别。

编辑：对不起，所有。不会使用查询字符串缓存的是Squid，而不是IE6。更多信息在这里。

---

关于它的价值，我看到了deviantART网站，这是一个很大的站点，其JavaScript文件为54504.js。我刚刚检查了一下，发现它们现在充当v6core.css？-5855446573 v6core_jc.js？4150339741等。

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

---

即使您不打算使用Powershell自动执行部署，这里的一些非常有用的技术。

---

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

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

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

一旦执行此操作，就可以使用Expires / Cache-Control标头，使客户端"永远"缓存JS资源，因为该路径随每个发行版而变化，我认为这就是@JasonCohen的意思。

---

您的网络服务器是否发送了正确的标题以告知浏览器它具有新版本？我也已经在查询字符串中添加了日期。即myscripts.js？date = 4/14/2008 12:45:03(仅对日期进行编码)

---

我也只是重命名。它永远不会失败，而且很容易做到。

---