浏览器端缓存的一个小问题及解决方案

浏览器端缓存的一个小问题及解决方案

浏览器的缓存行为可以提高网页的加载速度，但有时也会带来一些困扰。当用jQuery的get方法异步调用服务端资源的时候，浏览器会把调用结果进行缓存，拿不到实时的数据影响代码的逻辑实现，这种情况最简单的解决方法是在请求的链接后加一个随机数参数，或者用jQuery的Ajax方法并设置cache为false。

但上面两种总感觉不太完美，项目中大量的使用了ajax，每一个都加一个随机参数，想想都蛋疼；使用$.ajax并设置cache为false的方式，多少有些繁琐，而且难免有开发人员忽略这个问题使用了$.get引起bug。

于是决定使用jQuery.ajaxSetup()方法，全局禁用浏览器端缓存。在一个全局的js脚本中增加以下代码：

 $.ajaxSetup({ cache: false });

新问题随之而来，这种方式不仅禁用了一般请求的缓存，也禁用js脚本文件的缓存，项目中的js文件比较多，再加上使用了大量的第三方的前端组件，每次刷新页面，这些js都要重新加载一遍，页面响应直接由原来的流畅变为龟速了。

有没有办法禁用ajax的缓存，保留脚本文件的缓存呢？

在jQuery官方文档上找到了这个方法 jQuery.ajaxPRefilter，可以对不同请求类型分别进行配置，于是可以全局禁用缓存，然后针对script开启缓存，最终代码如下：

$.ajaxSetup({ cache: false });$.ajaxPrefilter('script', function (options) { options.cache = true; });

对于脚本的缓存，还有一个问题需要注意，如果浏览器缓存了该脚本，而服务端有修改了这个脚本，可能会引起一些错误。对脚本文件的url加一个版本号可以解决这个问题，每次修改了脚本后只需要递增这个版本号即可。如果使用mvc的Bundle来管理js文件的话就不用考虑这个了，把web.config的开关设置为release之后，Bundle框架会自动处理js文件的版本问题。