解决修改css或js文件后,浏览器缓存未更新问题

问题描述:最近在上线新版本项目的时候,发现有的用户的操作还是调用的老版本JS里面的内容,这样就造成原来新的JS里面加上的限制不能限制用户的操作,从而导致用户可以重复操作。

问题产生原因:

如果在用户之前已经访问过系统,那么浏览器中会缓存该系统的CSS、JS,这些CSS、JS缓存未过期之前,浏览器只会从缓存中读取CSS和JS,如果在服务器上修改了css和js,那么这些修改在用户的浏览器中是不会有变化的。

解决方式一:

用户按Ctrl + F5强制刷新页面或者手动清空了浏览器的缓存。此时浏览器会重新向服务器获取CSS和JS文件,新的文件便会生效。

解决方式二:

但是用户量过大的时候总不能让每个用户一一清理缓存吧,于是便从代码的角度着手解决这个问题。在js后面添加版本号,让浏览器把这个JS文件当做新的文件重新向服务器获取资源。

加版本号前:

<script type="text/javascript" th:src="@{/js/test/index.js}"></script>

加版本号后:

<script type="text/javascript" th:src="@{/js/test/index.js?v=1.0}"></script>

此时问题解决,CSS与上类似。

问题延伸:

但是JS文件或CSS过多的情况下需要一个一个的去修改版本号,会花费大量的时间,此时就需要版本号是动态获取的了。

更换为从messages.properties中读取
<script type="text/javascript" th:src="@{/js/test/index.js(v=#{js.version})}"></script>

目录结构如下

解决修改css或js文件后,浏览器缓存未更新问题

messages.properties内容如下

js.version=2.0

注意:如果要读取到配置文件内容,配置文件名必须是messages.properties。否则会出现以下错误

解决修改css或js文件后,浏览器缓存未更新问题

下面是正常的

解决修改css或js文件后,浏览器缓存未更新问题

到此动态修改JS文件版本号结束。当然配置文件名也支持自定义,只需在application.yml文件中加入一下内容指定文件名

spring:
messages:
basename: test

此时可以将messages.properties文件更换为test.properties,指定文件名的时候也可以加上文件目录,不一定放在resources目录下,只是默认在这个目录下。

总结:

通过对JS的改动就可以使浏览器重新从服务器获取JS文件,虽然只是一个小的需求,但是减小了用户操作的麻烦以及JS不同步更新的问题。一个小小的细节,可以给我们带来很大的方便。

上一篇:设计模式4 外观模式 FACADE


下一篇:C语言进阶--DAY3