在实际项目开发过过程中,页面是上传到服务器上的。而为了减少服务器的压力,让用户少加载,浏览器会将图片、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标签的图片都不会重名,因为都是在后台生成的文件名。而如果是固定的文件名图片,方法同上。而对于背景图,由于更改了样式名,图片的解析路径自然是更新同步,因此背景图也更新了。

via:http://www.cnblogs.com/wuyuchang/p/3945860.html

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

  1. 清除css、javascript及背景图在浏览器中的缓存

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

  2. web@前端--html,css,javascript简介、第一个页面(常用标签简介)

    1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...

  3. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  4. 前端html+css+JavaScript 需要掌握的单词

    前端html+css+JavaScript 需要掌握的单词   broswer 浏览器(客户端) html 超文本标记语言 css 层叠样式表 javascript 语言名字(类似python/php ...

  5. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  6. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  7. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  8. 腾讯Web前端开发框架JX(Javascript eXtension tools)

    转自:Web前端开发-Web前端工程师 » 腾讯Web前端开发框架JX(Javascript eXtension tools) JX – Javascript eXtension tools 一个类似 ...

  9. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

随机推荐

  1. c++——数据结构

    1.写一个函数PrintN,使得传入一个N,打印从1到N的全部整数 #include<stdio.h> //循环实现 void PrintN(int N){ int i; ;i<=N ...

  2. 08 正则表达式,Math类,Random,System类,BigInteger,BigDecimal,Date,DateFormat,Calendar

    正则表达式:    是指一个用来描述或者匹配一系列符合某个语法规则的字符串的单个字符串.其实就是一种规则.有自己特殊的应用. public class Demo2_Regex { public sta ...

  3. 【次小生成树】【Kruskal】【prim】【转】

    原博客出处:https://blog.csdn.net/yasola/article/details/74276255 通常次小生成树是使用Prim算法进行实现的,因为可以在Prim算法松弛的同时求得 ...

  4. 安装部署redis3.2 phpRedisAdmin 攻略

    1.下载redis3.2稳定版本: 下载地址:  https://redis.io/download 2.安装: 解压文件后,进行文件夹: 执行以下命令: make cd src make insta ...

  5. 我的TDD实践---CI持续集成

    “我的TDD实践”系列之CI持续集成 写在前面: 我的TDD实践这几篇文章主要是围绕测试驱动开发所展开的,其中涵盖了一小部分测试理论,更多的则是关注工具的使用及环境的搭建,做到简单实践先行,后理论专精 ...

  6. MongoDB内存配置 --wiredTigerCacheSizeGB

    用top命令查看系统占用内存的情况 top -p $(pidof mongod),发现mongod占用了8G内存的35.6%.在服务器上运行两个mongod进程,很容易导致mongod异常退出. 一度 ...

  7. 使用kube_ping进行Keycloak群集设置 - DZone Cloud

    转自:https://www.jdon.com/51501 看看如何使用kube_ping和Keycloak实现自动发现? Keycloak是一个开源软件,提供身份管理和访问管理的单点登录.Keyco ...

  8. 数学的语言 化无形为可见 (Keith Devlin 著)

    第一章 数字为何靠的住 (已看) 第二章 心智的模式 (已看) 第三章 动静有数 (已看) 第四章 当数学成型 (已看) 第五章 数学揭开美之本质 (已看) 第六章 当数学到位 (已看) 第七章 数学 ...

  9. PHP获取站点根目录

    http://rmingwang.com/php-access-to-the-site-root-directory.html php绝对路径与相对路径详解完整版 http://www.phpthin ...

  10. 20165308 学习基础和C语言基础调查

    学习基础和C语言基础调查 技能学习 我认为给学生具体的, 能实践的, 能马上看到因果关系的教材和练习, 是激发学生兴趣, 好奇心, 求知欲的好方法. -- 引用自<做中学> 老师博客中注重 ...