JS 缓存的问题一直都是我们又爱又恨的东西。也是我们比较头痛的问题, 一方面为了提高网站响应速度,减少服务器的负担,和节省带宽,将需要将静态资源缓存在客户端, 但是另一方面,当 js 文件有改动的时候,如何快速的将客户端缓存的 js 文件都失效,这是非常头痛的问题。 以至于每次客户反馈问题的时候,我们第一个解决办法都是清理浏览器缓存。
一、使用参数
第一、脚本并不存在,而是服务端动态生成的,因此带了个版本号,以示区别。 即上面代码对于文件来说 等价于 但浏览器会认为他是 该文件的某个版本!
第二、客户端会缓存这些 css 或 js 文件,因此每次升级了 js 或 css 文件后,改变版本号,客户端浏览器就会重新下载新的 js 或 css 文件 ,刷新缓存的作用。
第二种情况最多,也可能两种同时存在。
版本号,可以是一个随机数,也可以是一个递增的值,大版本小版本的方式,或者根据脚本的生成时间书写,比如就是精确到了生成脚本的秒,而 2.3.3 就是大版本小版本的方式。
二、清除浏览器缓存的几种方法
1. meta 方法
//不缓存
2. 清理 form 表单的临时缓存
其实 form 表单的缓存对于我们书写还是有帮助的,一般情况不建议清理,但是有时候为了安全问题等,需要清理一下!
3. jquery ajax 清除浏览器缓存
方法一,用 ajax 请求服务器最新文件,并加上请求头 If-Modified-Since 和 Cache-Control,如下:
$.ajax({
url:'',
dataType:'json',
data:{},
beforeSend :function(xmlHttp){
xmlHttp.setRequestHeader("If-Modified-Since","0");
xmlHttp.setRequestHeader("Cache-Control","no-cache");
},
success:function(response){
//操作
}
async:false
});
方法二,直接用 cache:false,
$.ajax({
url:'',
dataType:'json',
data:{},
cache:false,
ifModified :true ,
success:function(response){
//操作
}
async:false
});
方法三:用随机数,随机数也是避免缓存的一种很不错的方法!
URL 参数后加上 “?ran=” + Math.random(); //当然这里参数 ran 可以任意取了
方法四:用随机时间,和随机数一样。
在 URL 参数后加上 “?timestamp=” + new Date().getTime();
4. 用 php 后端清理
在服务端加 header(“Cache-Control: no-cache, must-revalidate”);等等 (如 php 中)