在实际项目开发过过程中,页面是上传到服务器上的。而为了减少服务器的压力,让用户少加载,浏览器会将图片、css、js缓存到本地中,以便下次访问网站时使用。这样做不仅减少了服务器的压力,并且也减少了用户的下载次数,获得更好的用户体验。

  然而在版本升级或做一些css、js等调整的时候,缓存导致用户无法显示更新后的样式,这是另人头头疼的问题。除非用户自行手动升级缓存,不过几乎所有用户不会为了正常访问这个网站而去手动清除缓存,因为用户根本不知道是不是缓存的问题,而归根结底,用户就是认为你的页面存在问题,不能正常访问。

  为了可以正常使用缓存,又避免这样的问题,我们可以动脑筋想想,如果解决此问题呢?

  如果更改了样式不能正常访问,那么更改样式的文件名呢?答案是可以的,这里将不再验证。然而每次都手动的去更改文件名显然过于麻烦,能不能不更改文件名呢?答案是肯定的。我们可能通在引入的文件名后面加入版本号,与之前的版本都不同的版本号(一般为更新日期)。代码如下:

<link rel="stylesheet" type="text/css" href="reset.css?v=20140829">
<script type="text/javascript" src="core.js?v=20140829"></script>

  可以看到我的CSS文件名及JS文件名后面都跟了"v=20140829",这样做可以不去改变文件名又做到缓存的同时,可以实时更新。而"v=20140829"只是普遍习惯书写,可更改为其它的。

  最后是图片,一般img标签的图片都不会重名,因为都是在后台生成的文件名。而如果是固定的文件名图片,方法同上。而对于背景图,由于更改了样式名,图片的解析路径自然是更新同步,因此背景图也更新了。

清除css、javascript及背景图在浏览器中的缓存的更多相关文章

  1. 【Web前端】清除css、javascript及背景图在浏览器中的缓存

    在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...

  2. css — 定位、背景图、水平垂直居中

    目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; static 静态定位 relative ...

  3. DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并

    传说中的“三层嵌套技术”. 一.背景图合并: div+css+ps合图相结合的技术:通过精确到1px的css设置,使用ps合成背景图片,特别是小图片合并,来完成页面效果.         首先讲讲三层 ...

  4. vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

    使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...

  5. 浏览器中 Http缓存

    分类: web缓存主要有:数据库缓存.服务器缓存(代理服务器缓存.CDN缓存),浏览器缓存. 数据库缓存 当web应用的关系比较复杂,数据库中的表很多的时候,如果频繁进行数据库查询,很容易导致数据库不 ...

  6. css控制背景图片在浏览器中居中,下拉浏览器的时候背景图一直不变

    如 http://www.gm.com/ css样式如下 ;;} #con{ position:absolute; ; ; height:100%; width:100%; background-im ...

  7. HTML引用CSS实现自适应背景图

    链接图片背景代码 body {background: url('链接') no-repeat center 0;} 颜色代码 body{background:#FFF} 链接图片背景代码2 <b ...

  8. 关于CSS设置页面背景图的一些疑问

    关于背景图片的位置其background-position设置背景图片的位置有两种方式,一种是是根据像素设置,第二种根据百分比设置,第一种根据像素的位置是很简单的,只是关于百分比这个设置理解特别容易出 ...

  9. ps2020 将图片中的字清除 并且不损坏背景图

    步骤:1:使用选框工具选中要删除的字:2:选择-->色彩范围,选中字体颜色  :3.选择-->修改-->扩展:4.图片区域,右键填充--内容识别--确定: 1.使用选框工具选中要删除 ...

随机推荐

  1. &lt;八&gt;阅读&lt;&lt;大话设计模式&gt;&gt;该模型的外观

    Facade模式其实很好理解,被表面的东西展示海报.内部的东西,你不知道(因为我们有一个好包).例如,外部和公司内部制度,5交互系统,此5互.那么第一种就是外部系统和5个系统都进行交互:另外一种就是做 ...

  2. JavaScript 比量 Chrome 核心 360 浏览器(关闭和技巧)

    (原因:我相信你会找到360浏览器非常多web会有上述项目的一些问题,不管是"兼容模式"依然是"快速模式".问题也可能存在.非常多用户都装了360杀毒软件,基本 ...

  3. Androida规划nt打包

    1.准备工作 (1)首先安装好ant工具 (2)生成keystore 在jdk的bin文件夹下 输入 keytool -genkey -alias android.keystore -keyalg R ...

  4. Repository、IUnitOfWork

    Repository.IUnitOfWork 在领域层和应用服务层之间的代码分布与实现 本来早就准备总结一下关于Repository.IUnitOfWork之间的联系以及在各层中的分布,直到看到田园里 ...

  5. Different ways of associating known types in wcf

    解释一下这个博客Known Types此属性标签,假设翻译的单词,所谓已知类型它.在服务契约中实现多态的行为.有四种方式实现,以下来分别演示一下. 1.User KnownType attribute ...

  6. jekyll博客安装

    摘要: 一直用Mac,换了新公司使用的电脑是windows,网上粗略的看了一下Jekyll的安装.简略的实现了一遍 首先安装Ruby "Ruby安装文件下载地址" 下载对应版本,我 ...

  7. JAVA —— 数组

    import java.util.Arrays; public class Array { public static void main(String[] args){    Array test= ...

  8. ArcGIS 10 破解安装(win7 64位)

    上一周换了个win7 64位系统,昨天依照各种各样破解方法装ArcGIS10装了一天,装上之后ArcMap能用,可是装的AO sdk不能用,在VS2008里一拖就报错,确实把我给气坏了.今天早上上班, ...

  9. Java设计模式偷跑系列(十八)建模和责任链模式的实现

    转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/40018231 责任链模式(ChainOfResponsibility): 有多个对象,每一 ...

  10. poj 2565 Ants (KM+思维)

    Ants Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 4125   Accepted: 1258   Special Ju ...