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

    https://blog.csdn.net/app_12062011/article/details/77963494 ----> NMS-非极大值抑制进行后处理. 通常的做法是将检测框按得分排 ...

  2. php 中使用正则

    1.匹配一个由一个小写字母和一位数字组成的字符串,比如”z2″   用^[a-z][0-9]$ 2.当在一组方括号里使用^是,它表示“非”或“排除”的意思   比如要求第一个字符不能是数字:^[^0- ...

  3. time,datetime模块

    time & datetime 模块 在平常的代码中,我们常常需要与时间打交道.在Python中,与时间处理有关的模块就包括:time,datetime,calendar(很少用,不讲),下面 ...

  4. DevExpress使用方法GridControl总结

    1.隐藏最上面的GroupPanel gridView1.OptionsView.ShowGroupPanel=false; 2.得到当前选定记录某字段的值 sValue=Table.Rows[gri ...

  5. direct3d

    DirectX for .Net procedure 1, install DXSDK  https://www.microsoft.com/en-us/download/details.aspx?i ...

  6. MySQL之 从复制延迟问题排查

    一.从库复制延迟问题 1.可能的原因如下(1)主从服务器处于不同的网络之中,由于网络延迟导致:(2)主从服务器的硬件配置不同,从服务器的硬件配置(包括内存,CPU,网卡等)远低于主服务器:(3)主库上 ...

  7. mysql 5.45 以后需要 需要 安全套接字问题

    错误异常:According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established ...

  8. 记一次挂马清除经历:处理一个利用thinkphp5远程代码执行漏洞挖矿的木马

    昨天发现 一台服务器突然慢了 top 显示 几个进程100%以上的cpu使用 执行命令为 : /tmp/php  -s /tmp/p2.conf 基本可以确定是被挂马了 下一步确定来源 last 没有 ...

  9. WEB开发库收集

    1. EASYUI          http://www.jeasyui.com/ [INTRODUCTION] jQuery EasyUI framework helps you build yo ...

  10. JS 判断IE(转)

    一.: 之前,js判断的方式都是利用浏览器的useragent字段.通过判断useragent字段里面是否包含有MSIE字段来判断是否是IE系列浏览器,屡试不爽. 但是在IE11之后,微软把自家的IE ...