清除css、javascript及背景图在浏览器中缓存的简单方法

   2015-08-12 0
核心提示:为了减少服务器的压力,让用户少加载,浏览器会将图片、css、js缓存到本地中,以便下次访问网站时使用,为了可以正常使用缓存,又避免这样那样的问题,我们可以动脑筋想想,如果解决此问题呢
在实际项目开发过过程中,页面是上传到服务器上的。而为了减少服务器的压力,让用户少加载,浏览器会将图片、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标签的图片都不会重名,因为都是在后台生成的文件名。而如果是固定的文件名图片,方法同上。而对于背景图,由于更改了样式名,图片的解析路径自然是更新同步,因此背景图也更新了。
 
标签: 浏览器 缓存
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 使用create-react-app构建的项目(并引入react-app-polyfill做IE兼容)在开发环境下的IE浏览器中报错的解决方案
    使用create-react-app构建的项目(并引入react-
    个人所负责的一个项目,需要兼容IE11,所以已经按照react-app-polyfill官方指定的方案进行兼容配置即在项目src/index.js中:// The first lines in src/index.jsimport 'react-app-polyfill/ie11';import 'react-app-polyfill/stable';// other codes并在pack
    03-08
  • JavaScript 在不刷新或跳转页面的情况下改变当
    JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址var stateObject = {};var title = "改变后的网址的标题";var newUrl = "/my/awesome/url";history.pushState(stateObject,title,newUrl); 
    03-08
  • JavaScript new Date()IE浏览器下出错 NaN
    当涉及到编程,与日期的工作可能是棘手的。然而,幸运的是,大多数语言都已经完成了这个困难的工作,并有一种内置的日期功能来帮助我们。JavaScript是具有有用的功能来帮助大量输出,设置日期。The JavaScript Date Object开始日期在JavaScript中你需要做的第
    03-08
  • 【javascript基础】各浏览器中for in顺序的差异
    #w3h_content { line-height: 1.5 }#w3h_content h2 { margin: 20px 20px 10px; font-size: 150%; font-weight: normal; color: rgba(0, 51, 102, 1) }#w3h_content h3 { margin: 15px 20px 10px; font-size: 120%; font-weight: normal; color: rgba(2, 90,
    03-08
  • JavaScript支持IE和FireFox浏览器自动缩放图片
    本人在做某网站时碰到一个问题,即“要对某网页中一个DIV内所有的图片进行缩放,使超出500像素宽的图片按比例缩放至500像素宽”,在网上搜索了很久,只找到了一个以下代码,可让网页上的所有图片自动缩放,代码如下: script language="JavaScript"var imgObj
    03-08
  • 【CSS Hack】针对浏览器内核
    【FireFox】 @-moz-document url-prefix(){.className{color:#FFF}}【webkit内核:safari chrome】 @media screen and (-webkit-min-device-pixel-ratio:0){.className{color:#FFF}}【presto内核:opera】@media all and (-webkit-min-device-pixel-ratio:100
    03-08
  • CSS兼容各种浏览器的一些写法 css兼容各种浏览
    1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 padding 后, di
    03-08
  • vue绑定style使用需要添加浏览器引擎前缀的 CSS
    当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。
    03-08
  • css改变谷歌浏览器的滚动条样式 谷歌浏览器滚动
     详细内容请点击 /*---滚动条默认显示样式--*/::-webkit-scrollbar-thumb{      height:50px;   outline-offset:-2px;   outline:2px solid #fff;   -webkit-border-radius:4px;   border: 2px solid #fff;} /*---鼠标点击滚动条显示样式--*/:
    03-08
  • iphone safari浏览器CSS兼容性的解决方案集合
     1、iphone safari不兼容CSS的active的解决方案如下:body ontouchstart="" onmouseover=""/body 参考链接:http://stackoverflow.com/questions/8330559/hover-effects-using-css3-touch-events1、iphone safari不兼容CSS的active的解决方案如下:body ont
    03-08
点击排行