关于引用JS和CSS刷新浏览器缓存问题

秒速五厘米 2022-06-10 02:12 241阅读 0赞

有时候我们会碰到上线的新版本都要刷新一次缓存的问题。那是因为改了JS的内容，但是JSP引用的地方后面的字符串未发生改变导致浏览器读取浏览器缓存而不会重新加载新的JS内容，以下提供两种解决方式：

1.每次上线会更新一个版本号，用版本号作为引用的字符串：

2.每次修改了一个新的js，在引用此js的地方更新日期编号：

web网站css，js更新后客户浏览器缓存问题，需要刷新才能正常展示的解决办法

## **问题描述** ##

最近将公司官网样式进行了调整，部署到服务器后访问发现页面展示不正常，但是刷新之后就会展示正常。

## **问题分析** ##

研究之后发现可能的原因有

1.  css文件过大，加载缓慢
2.  本地缓存问题，虽然服务器修改了css文件，但是浏览器仍然使用本地缓存的css，

需要用户多刷新一次才能正常展示显然是很不合理的，那么怎么样解决更新后让浏览器请求新的css或[js][]文件呢？

## **解决办法** ##

### **方法1** 更新文件后更改css/js文件名。 ###

其实解决这个问题很简单，缓存是通过文件名标记缓存的内容的。在你更新了网站的css文件内容后，在更换一下css的文件名就可以了。如原先html中的css调用语句如下：

改一下css文件名：

### **方法2** 给css/js文件加个版本号 ###

每次修改css文件后还要修改css的文件名有点麻烦，那么我们可以在加载css语句中加入个版本号（即css链接中?后面的内容）就可以了。如原先html中的css调用语句如下：

将css文件的版本号改成新的：

#### **关于css/js文件后缀参数：** ####

css文件后面的问号起不到实际作用，仅能当作后缀，如果用问号加参数的方法，可以添加版本号等信息，更新的同时可以刷新一下浏览器端的缓存。一个小小的细节，可以给我们带来很大的方便。  
比如：

使用参数的两种作用：

1.  客户端会缓存css或js文件，因此每次升级了js或css文件后，改变版本号，客户端浏览器就会重新下载新的js或css文件，起到刷新缓存的作用。
2.  脚本并不存在，而是服务端动态生成的，因此带了个版本号，以示区别。 即上面代码对于文件来说 等价于 :

但浏览器会认为他是 该文件的某个版本！

第一使用最多，也可能两种作用同时使用。

[js]: http://lib.csdn.net/base/javascript

还没有评论，来说两句吧...