问题描述

对样式的css文件进行了修改,部署到服务器后访问发现页面展示不正常,但是刷新之后就会展示正常。

问题分析

研究之后发现可能的原因有

  1. css文件过大,加载缓慢
  2. 本地缓存问题,虽然服务器修改了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"/>

使用参数的两种作用:

  1. 客户端会缓存css或js文件,因此每次升级了js或css文件后,改变版本号,客户端浏览器就会重新下载新的js或css文件,起到刷新缓存的作用。

  2. 脚本并不存在,而是服务端动态生成的,因此带了个版本号,以示区别。

------------

转载自:http://blog.csdn.net/csdn100861/article/details/50684438

关于引用JS和CSS文件刷新浏览器缓存问题,部署服务器后客户端样式不刷新的更多相关文章

  1. 关于WEB-INF目录不提供外部访问及JSP引用 js,css 文件路径问题

    在 web 项目开发过程中,我们常常使用到 JSP,以及对静态资源,js,css 等引用,但是我们应该把这些资源文件放在哪个目录下面咧,怎么引用. 当然如果是前后端分离的项目倒不用考虑这些. WEB- ...

  2. Web移动端使用localStorage缓存Js和css文件 | 强制不要缓存

    1.尽量不把js放在onload事件中,而是放在由用户主动触发的事件 2.加时间戳,时间不同则会加载js而非使用缓存 强制不要缓存: <meta http-equiv=Cache-Control ...

  3. JavaScript使用localStorage缓存Js和css文件

    对于WebApp来说,将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间.特别是当移端信号不好高延迟时优化效果还是很显见的 下面的代 ...

  4. 用绝对路径引用JS、CSS

    项目中,最好使用绝对路径引用JS和CSS文件,详情如下: 1.vm文件中: <link rel="stylesheet" href="$!{request.cont ...

  5. 引用:使用grunt 压缩 合并js、css文件

    引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt   目录.png 2.在grunt目录下创建一个 src目录,存 ...

  6. ASP.NET中母版页引用外部js或css文件无效,提示对象未定义解决方法

    最近做网站用了一个js+css实现的带有二级菜单的导航条,在母版页创建好后,子页面调用出现了许多奇怪的问题,多方查证后的最终解决方案和大家分享下.... 1.路径问题 如果是一个单独的aspx页面调用 ...

  7. MVC学习随笔----如何在页面中添加JS和CSS文件

    http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...

  8. 引用js或css后加?v= 版本号的用法

    <span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?version ...

  9. 为js和css文件自动添加版本号

    web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服 ...

随机推荐

  1. Luogu P1903 [国家集训队]数颜色 / 维护队列 (带修莫队)

    #include <cstdio> #include <cstring> #include <iostream> #include <algorithm> ...

  2. Vue刷新页面VueX中数据清空了,怎么重新获取?

    Vue刷新页面VueX数据清空了,怎么重新获取? 点击打开视频讲解更详细 在vue中刷新页面后,vuex中的数据就没有了,这时我们要想使用就要重新获取数据了, 怎么在刷新后重新获取数据呢??? 这时我 ...

  3. [CF1537E] Erase and Extend (字符串)

    题面 给一个长度为 n \tt n n 的字符串,你可以进行无限次以下两种操作之一: 删去末尾的字符(此时要保证删去后字符串非空). 把当前整个字符串复制一份,接到自己的后面. 输出最终通过操作能达到 ...

  4. K8S服务滚动升级

    对于Kubernetes集群来说,一个service可能有多个pod,滚动升级(Rolling update)就是指每次更新部分Pod,而不是在同一时刻将该Service下面的所有Pod shutdo ...

  5. Python入门系列(三)一学就会-基础数据类型

    数据类型 您可以使用type()函数获取任何对象的数据类型. x = 5 print(type(x)) 数字类型 x = 1 # int y = 2.8 # float z = 1j # comple ...

  6. Android序列化的几种实现方式

    一.Serializable序列化 Serializable是java提供的一种序列化方式,其使用方式非常简单,只需要实现Serializable接口就可以实现序列化. public interfac ...

  7. 第四十八篇:webpack的基本使用(二) --安装和配置webpack-dev-server插件

    好家伙, 1.webpack中的默认约定 默认的打包入口文件为src  -->index.js 默认的输出文件路径为dist -->main.js 既然有默认,那么就说明肯定能改 2.en ...

  8. Homework5

    问:什么是分而治之? 答:分而治之就是通过一系列的方法,将复杂的问题逐渐划分成若干份相对简单的问题的方法,对每个相对简单问题进行一一解决,若干个简单问题的解的集合就是一个复杂问题的解.分而治之的应用体 ...

  9. 集成 Redis & 异步任务 - SpringBoot 2.7 .2实战基础

    SpringBoot 2.7 .2实战基础 - 09 - 集成 Redis & 异步任务 1 集成Redis <docker 安装 MySQL 和 Redis>一文已介绍如何在 D ...

  10. KingbaseES sys_prewarm 扩展

    Oracle 在查询数据 可以通过cache hint 所访问的数据cache 到数据库buffer,对于KingbaseES,如何将数据加载到cache 了?sys_prewarm 扩展插件可以实现 ...