解决修改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>
目录结构如下
messages.properties内容如下
js.version=2.0
注意:如果要读取到配置文件内容,配置文件名必须是messages.properties。否则会出现以下错误
下面是正常的
到此动态修改JS文件版本号结束。当然配置文件名也支持自定义,只需在application.yml文件中加入一下内容指定文件名
spring: messages: basename: test
此时可以将messages.properties文件更换为test.properties,指定文件名的时候也可以加上文件目录,不一定放在resources目录下,只是默认在这个目录下。
总结:
通过对JS的改动就可以使浏览器重新从服务器获取JS文件,虽然只是一个小的需求,但是减小了用户操作的麻烦以及JS不同步更新的问题。一个小小的细节,可以给我们带来很大的方便。
- Ethereum - 以太坊项目
- COGS 144. [USACO Dec07] 魅力手镯【01背包复习】
- SQL Server 使用全文索引进行页面搜索
- HDU 1003 Max Sum【动态规划求最大子序列和详解 】
- HDU 1005 Number Sequence【多解,暴力打表,鸽巢原理】
- HDU 1019 Least Common Multiple【gcd+lcm+水+多个数的lcm】
- HDU 1017 A Mathematical Curiosity【水,坑】
- 比特币项目
- HDU 1014 Uniform Generator【GCD,水】
- 【AlphaGo Zero 核心技术-深度强化学习教程代码实战05】SARSA(λ)算法实现
- 区块链应用场景:物联网和物流供应链
- HDU 1012 u Calculate e【暴力打表,水】
- Gym 100952C&&2015 HIAST Collegiate Programming Contest C. Palindrome Again !!【字符串,模拟】
- HDU 1013 Digital Roots【字符串,水】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在Linux中对文件的编码及对文件进行编码转换操作
- shutil模块,为什么说它是os模块的兄弟模块?
- HTML5+CSS3项目实战之河马牙医首页、百度首页、Mac桌面、简书首页、登录注册页面、苏宁易购首页
- 【Vue.js】Vue.js中的Vuex、Vue-Ajax和京东购物车项目实战
- ubuntu16.04安全小结-01
- 重新认识HTTP3xx重定向机制
- 【Vue.js】Vue.js中常用的UI组件库和Vue Router
- 四大查找算法
- 从Python调用堆栈获取行号等信息
- 详解supervisor进程管理
- Python时间模块常用操作总结
- rtmp规范1.0
- 实战|Python轻松实现动态网页爬虫(附详细源码)
- 排序算法 --- 桶排序
- 8086汇编语言——操作内存中的数据