帮助积极的JavaScript缓存

Bri*_*lly 20 javascript caching

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

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

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

某处有最佳实践清单吗?

Jas*_*hen 27

我们在所有Javascript(和CSS等)的末尾添加产品内部版本号,如下所示:

<script src="MyScript.js?4.0.8243">
Run Code Online (Sandbox Code Playgroud)

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

这有一个额外的好处,你可以设置HTTP标头,意思是"从不缓存!"


Jef*_*ood 9

它保留在浏览器中缓存的副本,即使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缓存的工作原理.但只能以外科手术,有限的方式使用它来处理那些可以受益的特定文件夹或文件.对于其他任何事情,风险都超过了收益.这肯定不是你想要打开的整个网站的一揽子默认设置..除非你喜欢每次内容更改时更改文件名.


Chr*_*org 7

@Jason和Darren

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

<script src="/js/version/MyScript.js"/>
Run Code Online (Sandbox Code Playgroud)

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

编辑:对不起所有; 不是用查询字符串缓存的是Squid,而不是IE6.更多信息在这里.


Chr*_*rts 7

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

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

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