关于引用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应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服 ...
随机推荐
- Luogu P1903 [国家集训队]数颜色 / 维护队列 (带修莫队)
#include <cstdio> #include <cstring> #include <iostream> #include <algorithm> ...
- Vue刷新页面VueX中数据清空了,怎么重新获取?
Vue刷新页面VueX数据清空了,怎么重新获取? 点击打开视频讲解更详细 在vue中刷新页面后,vuex中的数据就没有了,这时我们要想使用就要重新获取数据了, 怎么在刷新后重新获取数据呢??? 这时我 ...
- [CF1537E] Erase and Extend (字符串)
题面 给一个长度为 n \tt n n 的字符串,你可以进行无限次以下两种操作之一: 删去末尾的字符(此时要保证删去后字符串非空). 把当前整个字符串复制一份,接到自己的后面. 输出最终通过操作能达到 ...
- K8S服务滚动升级
对于Kubernetes集群来说,一个service可能有多个pod,滚动升级(Rolling update)就是指每次更新部分Pod,而不是在同一时刻将该Service下面的所有Pod shutdo ...
- Python入门系列(三)一学就会-基础数据类型
数据类型 您可以使用type()函数获取任何对象的数据类型. x = 5 print(type(x)) 数字类型 x = 1 # int y = 2.8 # float z = 1j # comple ...
- Android序列化的几种实现方式
一.Serializable序列化 Serializable是java提供的一种序列化方式,其使用方式非常简单,只需要实现Serializable接口就可以实现序列化. public interfac ...
- 第四十八篇:webpack的基本使用(二) --安装和配置webpack-dev-server插件
好家伙, 1.webpack中的默认约定 默认的打包入口文件为src -->index.js 默认的输出文件路径为dist -->main.js 既然有默认,那么就说明肯定能改 2.en ...
- Homework5
问:什么是分而治之? 答:分而治之就是通过一系列的方法,将复杂的问题逐渐划分成若干份相对简单的问题的方法,对每个相对简单问题进行一一解决,若干个简单问题的解的集合就是一个复杂问题的解.分而治之的应用体 ...
- 集成 Redis & 异步任务 - SpringBoot 2.7 .2实战基础
SpringBoot 2.7 .2实战基础 - 09 - 集成 Redis & 异步任务 1 集成Redis <docker 安装 MySQL 和 Redis>一文已介绍如何在 D ...
- KingbaseES sys_prewarm 扩展
Oracle 在查询数据 可以通过cache hint 所访问的数据cache 到数据库buffer,对于KingbaseES,如何将数据加载到cache 了?sys_prewarm 扩展插件可以实现 ...