【转载】web网站css,js更新后客户浏览器缓存问题,需要刷新才能正常展示的解决办法
2017-11-03 16:59
891 查看
原文:http://blog.csdn.net/csdn100861/article/details/50684438
css文件过大,加载缓慢
本地缓存问题,虽然服务器修改了css文件,但是浏览器仍然使用本地缓存的css,
需要用户多刷新一次才能正常展示显然是很不合理的,那么怎么样解决更新后让浏览器请求新的css或js文件呢?
1
改一下css文件名:
1
1
将css文件的版本号改成新的:
1
比如:
1
1
使用参数的两种作用:
客户端会缓存css或js文件,因此每次升级了js或css文件后,改变版本号,客户端浏览器就会重新下载新的js或css文件,起到刷新缓存的作用。
脚本并不存在,而是服务端动态生成的,因此带了个版本号,以示区别。 即上面代码对于文件来说 等价于 :
1
1
但浏览器会认为他是 该文件的某个版本!
第一使用最多,也可能两种作用同时使用。
问题描述
部署到服务器后访问发现页面展示不正常,但是刷新之后就会展示正常。问题分析
可能的原因有css文件过大,加载缓慢
本地缓存问题,虽然服务器修改了css文件,但是浏览器仍然使用本地缓存的css,
需要用户多刷新一次才能正常展示显然是很不合理的,那么怎么样解决更新后让浏览器请求新的css或js文件呢?
解决办法
方法1 更新文件后更改css/js文件名。
其实解决这个问题很简单,缓存是通过文件名标记缓存的内容的。在你更新了网站的css文件内容后,在更换一下css的文件名就可以了。如原先html中的css调用语句如下:<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
1
改一下css文件名:
<link rel="stylesheet" href="styleV2.css" type="text/css" media="screen"/>
1
方法2 给css/js文件加个版本号
每次修改css文件后还要修改css的文件名有点麻烦,那么我们可以在加载css语句中加入个版本号(即css链接中?后面的内容)就可以了。如原先html中的css调用语句如下:<link rel="stylesheet" href="style.css?v=2015" type="text/css" media="screen"/>
1
将css文件的版本号改成新的:
<link rel="stylesheet" href="style.css?v=2016" type="text/css" media="screen"/>
1
关于css/js文件后缀参数:
css文件后面的问号起不到实际作用,仅能当作后缀,如果用问号加参数的方法,可以添加版本号等信息,更新的同时可以刷新一下浏览器端的缓存。一个小小的细节,可以给我们带来很大的方便。比如:
<script type="text/javascript" src="homepage.js?version=1.2.6"></script>
1
<link rel="stylesheet" href="base.css?version=2.3.3" type="text/css"/>
1
使用参数的两种作用:
客户端会缓存css或js文件,因此每次升级了js或css文件后,改变版本号,客户端浏览器就会重新下载新的js或css文件,起到刷新缓存的作用。
脚本并不存在,而是服务端动态生成的,因此带了个版本号,以示区别。 即上面代码对于文件来说 等价于 :
<script type="text/javascript" src="homepage.js"></script>
1
<link rel="stylesheet" href="base.css" type="text/css"/>
1
但浏览器会认为他是 该文件的某个版本!
第一使用最多,也可能两种作用同时使用。
相关文章推荐
- 【转载】----web网站css,js更新后客户浏览器缓存问题,需要刷新才能正常展示的解决办法
- web网站css,js更新后客户浏览器缓存问题,需要刷新才能正常展示的解决办法
- web网站css,js更新后客户浏览器缓存问题,需要刷新才能正常展示的解决办法
- web网站css,js更新后客户浏览器缓存问题,需要刷新才能正常展示的解决办法
- web网站css,js更新后客户浏览器缓存问题,需要刷新才能正常展示的解决办法
- 如何解决网站页面CSS、JS脚本在浏览器的缓存问题
- 解决修改css或js文件,浏览器缓存更新问题。
- 解决修改css或js文件,浏览器缓存更新问题。
- 处理ios webview 更新缓存本地css、js后webview缓存无法更新的问题
- javaweb 常见问题-第2篇- chrom google 浏览器 调试时js无法刷新的解决方法
- Web 解决浏览器缓存js,css等静态文件的方法
- 解决CSS、JS文件更新网站效果却没实时更新的问题
- DIV+CSS构建网站时常会出现浏览器不兼容的问题,下面整理了一些常见不兼容问题,及解决办法!
- 关于引用JS和CSS刷新浏览器缓存问题
- 解决WEB对js、css缓存问题的一种可行方案
- 网页缓存Js,css以及图片导致页面刷新无效果的三种解决办法
- CSS和JS更新,缓存同步更新解决办法
- [Filter过滤器]解决缓存网站图片,css,js等问题
- 解决修改css文件或js文件后浏览器无法及时更新的问题方法
- Web项目发布 采用gulp压缩 JS CSS CSHTML ASPX HTML Image 给JS CSS自动添加版本号 强制浏览器刷新缓存