清除css、javascript及背景图在浏览器中的缓存
在实际项目开发过过程中,页面是上传到服务器上的。而为了减少服务器的压力,让用户少加载,浏览器会将图片、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及背景图在浏览器中的缓存的更多相关文章
- 【Web前端】清除css、javascript及背景图在浏览器中的缓存
在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...
- css — 定位、背景图、水平垂直居中
目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; static 静态定位 relative ...
- DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并
传说中的“三层嵌套技术”. 一.背景图合并: div+css+ps合图相结合的技术:通过精确到1px的css设置,使用ps合成背景图片,特别是小图片合并,来完成页面效果. 首先讲讲三层 ...
- vue-cli构建的vue项目打包后css引入的背景图路径不对的问题
使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...
- 浏览器中 Http缓存
分类: web缓存主要有:数据库缓存.服务器缓存(代理服务器缓存.CDN缓存),浏览器缓存. 数据库缓存 当web应用的关系比较复杂,数据库中的表很多的时候,如果频繁进行数据库查询,很容易导致数据库不 ...
- css控制背景图片在浏览器中居中,下拉浏览器的时候背景图一直不变
如 http://www.gm.com/ css样式如下 ;;} #con{ position:absolute; ; ; height:100%; width:100%; background-im ...
- HTML引用CSS实现自适应背景图
链接图片背景代码 body {background: url('链接') no-repeat center 0;} 颜色代码 body{background:#FFF} 链接图片背景代码2 <b ...
- 关于CSS设置页面背景图的一些疑问
关于背景图片的位置其background-position设置背景图片的位置有两种方式,一种是是根据像素设置,第二种根据百分比设置,第一种根据像素的位置是很简单的,只是关于百分比这个设置理解特别容易出 ...
- ps2020 将图片中的字清除 并且不损坏背景图
步骤:1:使用选框工具选中要删除的字:2:选择-->色彩范围,选中字体颜色 :3.选择-->修改-->扩展:4.图片区域,右键填充--内容识别--确定: 1.使用选框工具选中要删除 ...
随机推荐
- [数字dp] hdu 3565 Bi-peak Number
意甲冠军: 为了范围[X,Y],的最大位数的范围内的需求高峰和值多少. 双峰是为了满足一些规定数量 你可以切两 /\ /\ 形式. 思维: dp[site][cur][ok] site地点 面的数 ...
- onethink和phpwind共享
将onethink和phpwind数据库安装在一起.使用公用表前缀. 将onethink的member表点phpwind有user表 这是onethink在根文件夹的安装,phpwind安装在bbs的 ...
- Event Sourcing - ENode(二)
接上篇文章继续 http://www.cnblogs.com/dopeter/p/4899721.html 分布式系统 前篇谈到了我们为何要使用分布式系统,因为ENode本身就是一个分布式的框架.看了 ...
- “NET网络”进行中,多管齐下的人才力挫“”粗俗
随着互联网的迅猛发展,一些不太干净.低俗的甚至色情的内容不断浮现.不仅严重影响了我们的上网体验,也成为扰乱互联网正常秩序的罪魁祸首,部分不法内容甚至给网民造成了一定的財产损失.在这样的 ...
- schema for clojure
Schema for Clojure Data Shape Declaration and Validation 1.何为schema schema是描写叙述数据形式的一种clojure数据结构,可用 ...
- hdu 3001 Travelling (TSP问题 )
Travelling Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- k8s google sample - guestbook
Redis读写分离作为存储 PHP网页作为前端 github地址 https://github.com/kubernetes/kubernetes/blob/release-1.1/examples/ ...
- Advanced Installer 9.8打包实录
原文 Advanced Installer 9.8打包实录 主要介绍:(1)创建工程,(2)创建快捷方式及其图标(3)卸载设置 创建工程(.net为例): 工程创建完成....接下来进行简单设置 开始 ...
- C#动态调用WCF接口
C#动态调用WCF接口 写在前面 接触WCF还是它在最初诞生之处,一个分布式应用的巨作. 从开始接触到现在断断续续,真正使用的项目少之又少,更谈不上深入WCF内部实现机制和原理去研究,最近自己做一个项 ...
- Android SDCard Mount 流程分析
前段时间对Android 的SDCard unmount 流程进行了几篇简短的分析,由于当时只是纸上谈兵,没有实际上的跟进,可能会有一些误导人或者小错误.今天重新梳理了头绪,针对mount的流程再重新 ...