关于引用JS和CSS文件刷新浏览器缓存问题,部署服务器后客户端样式不刷新
问题描述
对样式的css文件进行了修改,部署到服务器后访问发现页面展示不正常,但是刷新之后就会展示正常。
问题分析
研究之后发现可能的原因有
- css文件过大,加载缓慢
- 本地缓存问题,虽然服务器修改了css文件,但是浏览器仍然使用本地缓存的css,
需要用户多刷新一次才能正常展示显然是很不合理的,那么怎么样解决更新后让浏览器请求新的css或js文件呢?
解决办法
方法1 更新文件后更改css/js文件名。
其实解决这个问题很简单,缓存是通过文件名标记缓存的内容的。在你更新了网站的css文件内容后,在更换一下css的文件名就可以了。如原先html中的css调用语句如下:
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
改一下css文件名:
<link rel="stylesheet" href="styleV2.css" type="text/css" media="screen"/>
方法2 给css/js文件加个版本号
每次修改css文件后还要修改css的文件名有点麻烦,那么我们可以在加载css语句中加入个版本号(即css链接中?后面的内容)就可以了。如原先html中的css调用语句如下:
<link rel="stylesheet" href="style.css?v=2015" type="text/css" media="screen"/>
将css文件的版本号改成新的:
<link rel="stylesheet" href="style.css?v=2016" type="text/css" media="screen"/>
关于css/js文件后缀参数:
css文件后面的问号起不到实际作用,仅能当作后缀,如果用问号加参数的方法,可以添加版本号等信息,更新的同时可以刷新一下浏览器端的缓存。一个小小的细节,可以给我们带来很大的方便。
比如:
<script type="text/javascript" src="homepage.js?version=1.2.6"></script>
<link rel="stylesheet" href="base.css?version=2.3.3" type="text/css"/>
使用参数的两种作用:
客户端会缓存css或js文件,因此每次升级了js或css文件后,改变版本号,客户端浏览器就会重新下载新的js或css文件,起到刷新缓存的作用。
脚本并不存在,而是服务端动态生成的,因此带了个版本号,以示区别。
------------
转载自:http://blog.csdn.net/csdn100861/article/details/50684438
关于引用JS和CSS文件刷新浏览器缓存问题,部署服务器后客户端样式不刷新的更多相关文章
- 关于WEB-INF目录不提供外部访问及JSP引用 js,css 文件路径问题
在 web 项目开发过程中,我们常常使用到 JSP,以及对静态资源,js,css 等引用,但是我们应该把这些资源文件放在哪个目录下面咧,怎么引用. 当然如果是前后端分离的项目倒不用考虑这些. WEB- ...
- Web移动端使用localStorage缓存Js和css文件 | 强制不要缓存
1.尽量不把js放在onload事件中,而是放在由用户主动触发的事件 2.加时间戳,时间不同则会加载js而非使用缓存 强制不要缓存: <meta http-equiv=Cache-Control ...
- JavaScript使用localStorage缓存Js和css文件
对于WebApp来说,将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间.特别是当移端信号不好高延迟时优化效果还是很显见的 下面的代 ...
- 用绝对路径引用JS、CSS
项目中,最好使用绝对路径引用JS和CSS文件,详情如下: 1.vm文件中: <link rel="stylesheet" href="$!{request.cont ...
- 引用:使用grunt 压缩 合并js、css文件
引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt 目录.png 2.在grunt目录下创建一个 src目录,存 ...
- ASP.NET中母版页引用外部js或css文件无效,提示对象未定义解决方法
最近做网站用了一个js+css实现的带有二级菜单的导航条,在母版页创建好后,子页面调用出现了许多奇怪的问题,多方查证后的最终解决方案和大家分享下.... 1.路径问题 如果是一个单独的aspx页面调用 ...
- MVC学习随笔----如何在页面中添加JS和CSS文件
http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...
- 引用js或css后加?v= 版本号的用法
<span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?version ...
- 为js和css文件自动添加版本号
web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服 ...
随机推荐
- EMAS Serverless系列~4步教你快速搭建小程序
体验简介 本实验基于 EMAS Serverless 的云函数.云数据库.云存储等云服务能力一站式快速开发小程序<私人云相册>.Demo 主要包括如下功能: 1 相册管理 2 上传相片 3 ...
- linux 旁路掉协议栈的处理点
对于协议栈的发展,目前有三种处理趋势,一种是类似于使用dpdk的方式,然后将协议栈放到用户态来做,做得比较好的一般都是以bsd的协议栈为底子,可以参考的是腾讯开源的的方案,另外一种是,继续放在内核,但 ...
- Java对象已死吗 深入理解Java虚拟机笔记
1.引用计数器法 给每个对象设置一个计数器,每当有一个引用就给计数器的值+1,引用时小时就减一,当计数器值为0是就可以回收掉了. 主流虚拟机都没有使用这种算法,循环依赖问题 2.可达性分析: 思路是通 ...
- 多种方法在Markdown加入上划线、中划线、下划线
上划线和下划线不是Markdown自身语法,因此需要一点摸索,特将结果记录于此 1.中划线 中划线是markdown自身语法,实现起来很简单: ~~中划线~~ 实现的效果如下: 中划线 2.下划线 2 ...
- Java Web中MVC设计模式与IOC
MVC是由Model(模型).View(视图).Controller(控制器)三个模块组成 视图:用于做数据展示以及和用户交互的一个界面(html页面) 控制层:能够接受客户端的请求,具体的业务功能还 ...
- 第三课:nodejs npm和vue
1.安装node js 2.node js给windows提供了一个可以直接执行js的环境{node提供翻译} 3.npm是包管理器 a.npm是nodejs的组成部分 b.管 包(package) ...
- Java开发学习(二十九)----Maven依赖传递、可选依赖、排除依赖解析
现在的项目一般是拆分成一个个独立的模块,当在其他项目中想要使用独立出来的这些模块,只需要在其pom.xml使用<dependency>标签来进行jar包的引入即可. <depende ...
- Springboot_maven多环境配置
开发过程中总是需要多环境配置,而Spring自带的方式不是那么优秀,可以利用maven来帮助做到 可以再pom.xml中配置profiles来做到 打包命令: mvn clean package -P ...
- centOS查看修改时区
// 查看时间各种状态,查看时区等 timedatectl // 输出 Local time: 四 2014-12-25 10:52:10 CST Universal time: 四 2014-12- ...
- 本地 maven + scala 跑spark wordcount
pom.xml 点击查看代码 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...