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

    http://www.ruanyifeng.com/blog/2017/10/bulma.html

  2. EasyUI datagrid 查询、设置、提交 三

    查询 $(“#grid”).datagrid(“load”,{  a: $('#id').val(),b :$('#text').val() });   {} 里面可以 是序列化参数 $(“#grid ...

  3. Create-React-App脚手架使用方法

    Facebook 官方推出Create-React-App脚手架,基本可以零配置搭建基于webpack的React开发环境,内置了热更新等功能. 由于create-react-app命令预先安装和配置 ...

  4. pycharm 的操作1

  5. hasura graphql-engine &&patroni docker-compose 环境运行

    patroni 是一个很不错的pg ha 解决方案,graphql-engine 是一个很好的graphql 工具,为了方便使用 参考patroni官方的文档,使用docker-compose 将应用 ...

  6. Road Crossing Game Template 学习

    using UnityEngine; using System; namespace RoadCrossing.Types { /// <summary> /// 小路 /// </ ...

  7. IBM MQ相关 ---- 系列文章

    原 IBM websphere MQ远程队列的简单配置 转 MQ7.5以后的权限问题解决 原 MQ--API总结 转 连接IBM MQ原因码报2035的错误解决办法 原 Java连接MQ的实例 转 通 ...

  8. js 时间戳和日期互转

    // 获取当前时间戳(以s为单位) var timestamp = Date.parse(new Date()); timestamp = timestamp / 1000; //当前时间戳为:140 ...

  9. python datetime学习

    Python中处理时间的模块datetime, 这个模块里包含的类也叫datetime,所以要使用需要先import from datetime import datetime 获取当前日期和时间 d ...

  10. Kubernetes 架构图

    Kubernetes 架构图: Pod K8S中最基础的调度单位是Pod,它有网络,有存储.Pod里面运行着一个或者若干个docker容器.同一个Pod里的容器共享同一个网络命名空间,可以使用loca ...