web网站css,js更新后客户浏览器缓存问题,需要刷新才能正常展示的解决办法
2024-08-26 08:50:55
问题描述
最近将公司官网样式进行了调整,部署到服务器后访问发现页面展示不正常,但是刷新之后就会展示正常。
问题分析
研究之后发现可能的原因有
- 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
但浏览器会认为他是 该文件的某个版本!
第一使用最多,也可能两种作用同时使用。
最新文章
- 转载:《TypeScript 中文入门教程》 13、类型兼容性
- Sql Server 分区演练 【转】
- Thinking in Java——笔记(4)
- Heap:左式堆的应用例(任意序列变单调性最小价值)
- .Net下实现可扩展的编程方法简述
- Fedora 14 x64 试用手记
- 安装jasperwave出错
- 1100. Mars Numbers (20)
- ORA-24010 SMG-3000
- Elasticsearch java api 基本搜索部分详解
- No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android";
- Python3 读写文件
- Linux服务器中创建Oracle数据库实例
- Django之Web框架本质及第一个Django实例
- Python 环境的搭建(转载)
- vscode 自动提示Threejs
- JAVA generic array 泛型数组
- SQL已存在则更新不存在则插入
- python 输出 a+b
- mysqldump全量备份+mysqlbinlog二进制日志增量备份
热门文章
- php配置文件php.ini的详细解析
- ASP.NET -- WebForm -- 页面生命周期
- LeetCode算法题-First Unique Character in a String(Java实现)
- jquery.qrcode.js 生成二维码并支持中文的方法
- 关于pycharm中使用charts无法显示图表的问题(属于个人粗心问题)
- JDBC复习1
- Loj 6068. 「2017 山东一轮集训 Day4」棋盘
- SQlite源码分析--源网站
- python subprocess.Popen 控制台输出 实时监控百度网ping值
- linux普通用户提权操作