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

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

问题产生缘由:css

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

解决方式一:java

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

解决方式二:浏览器

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

加版本号前:服务器

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

加版本号后:app

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

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

问题延伸:

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

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

目录结构以下

messages.properties内容以下

js.version=2.0

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

下面是正常的

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

spring:
  messages:
    basename: test

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

总结:

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

相关文章
相关标签/搜索