在实际项目开发过过程中,页面是上传到服务器上的。而为了减少服务器的压力,让用户少加载,浏览器会将图片、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. Codeforces 442B Andrey and Problem(贪婪)

    题目链接:Codeforces 442B Andrey and Problem 题目大意:Andrey有一个问题,想要朋友们为自己出一道题,如今他有n个朋友.每一个朋友想出题目的概率为pi,可是他能够 ...

  2. 修饰模式(Decorator结构化)C#简单的例子

    修饰模式(Decorator结构化)C#简单的例子 播放器的基本功能是移动.执行等.BaseAbility 新增功能:1.伤害技能harmAbility:2.阻碍技能BaulkAbility:3.辅助 ...

  3. HTTP简单的解析协议

    1.HTTP定义的协议 官方的定义:        WWW这是Internet作为传输介质的应用.WWW主变速器单元是在线Web网页.WWW它正在给客户/server计算模型,由Web浏览器Webse ...

  4. iOS_21团购_发送请求【点评】数据

    结果表明,一个简单的请求: 用到的点评封装的类: 使用tableView简单展示: // // DealListController.m // 帅哥_团购 // // Created by beyon ...

  5. oracle触发农产品证明文件号码

    CREATE OR REPLACE TRIGGER TRG_KC_SPRK_i     BEFORE INSERT ON KC_SPRK     FOR EACH ROW DECLARE     vS ...

  6. remine chart2安装

    http://blog.csdn.net/kufeiyun/article/details/9213911

  7. unity3d 依据指定的Assets下的目录路径 返回这个路径下的全部文件名称

    using UnityEngine; using System.Collections; using System.Collections.Generic; using System.IO; < ...

  8. 微博API怎么爬取其它未授权用户的微博/怎么爬取指定用户公布的微博

    获取某个用户最新发表的微博列表:http://open.weibo.com/wiki/2/statuses/user_timeline 原接口已经被封.很多人都在问怎么获取指定用户的微博,于是写这篇B ...

  9. C++ Primer 学习笔记_29_STL实践与分析(3) --操作步骤集装箱(下一个)

    STL实践与分析 --顺序容器的操作(下) 六.訪问元素 假设容器非空,那么容器类型的front和back成员将返回容器的第一个和最后一个元素的引用. [与begin和end的对照:] 1)begin ...

  10. ORACLE 根据上表不同的字段值的统计

    select p.id comperitorId,p.compcorp competitorName, sum(case when c.kindname = 'ATM' then c.num else ...