• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > HTML中css和js链接中的版本号(刷新缓存)

HTML中css和js链接中的版本号(刷新缓存)

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含链接,版本号等相关知识,佚名 希望在学习及工作中可以帮助到您

背景
     在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css、js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css、js等,而不必从你的服务器读取,这样在一定程度上加快了网站的打开速度,又可以节约一下你的服务器流量。

问题
     现在问题来了,.htaccess设置的css、js缓存都有一个过期时间,如果在访客的浏览器中已经缓存了css、js,在这些css、js缓存未过期之前,浏览器只会从缓存中读取css和js,如果你在服务器上修改了css和js,那么这些更改在回头客的浏览器中是不会有变化的,除非回头客按了Ctrl + F5刷新了你的网站页面或者手动清空了浏览器的缓存。一个网站的访客成千上万,回头客也会有不少,你不可能在更新css后让每个访客都刷新一下缓存吧,那么这个问题你会怎么处理呢?

方法一

     更改css文件名:其实解决这个问题很简单,缓存是通过文件名标记缓存的内容的。在你更新了网站的css文件内容后,在更换一下css的文件名就可以了。如原先html中的css调用语句如下:


     改一下css文件名就可以了:


     另外一种更改css文件名的方法是将版本号写到文件名中,如:


     css文件更新后,改一下文件名中的版本号即可:


方法二
     给css文件加个版本号:其实每次修改css文件后还要修改css的文件名有点麻烦,那么我们可以在加载css语句中加入个版本号(即css链接中?后面的内容)就可以了。如原先html中的css调用语句如下:


     改一下css文件的版本号改成2012就可以了:


     需要注意的是,部分代理缓存服务器不会缓存网址中包含 "?" 的资源,所以方法二可能会导致你原先的缓存功能失效,可以改用第一种方法。

总结

     其实css文件后面的问号起不到实际作用,仅能当作后缀,如果用问号加参数的方法,可以添加版本号等信息,同时可以刷新一下浏览器端的缓存。一个小小的细节,可以给我们带来很大的方便。

您可能想查找下面的文章:

  • 如何去掉图片作为超链接时出现的蓝色框框
  • 如何去掉超链接下划线用三个简单的实例来说明
  • 设置网页图片热点链接以及坐标值示例代码
  • 鼠标经过图片超链接时改变图片的大小(宽、高)的css
  • HTML写链接的时候要始终将正斜杠添加到子文件夹减少HTTP请求
  • 去除在FireFox中点击链接时,出现虚线边框的解决办法
  • HTML中css和js链接中的版本号(刷新缓存)
  • 正确的空链接写法 防止点击后页面会跳动问题 a href #号问题
  • css如何实现自定义更为美观的链接提示效果
  • 去掉点击链接时出现的虚线框的几个方法

相关文章

  • 2017-08-06五条准则帮你写出可维护的css代码
  • 2018-08-23是谁剥夺了设计师的话语权?来看资深设计师的总结!
  • 2018-08-23UI配色这件事情,可以指望这6个实用技巧
  • 2018-08-23实在干货!为老年用户做体验设计应该注意的6个细节
  • 2018-08-23超全面!可能是最详细的垂直电商首页设计总结
  • 2018-08-23高手的平面课堂!用一个实战案例帮你学会平衡构图
  • 2017-08-06水平滚动的网站设计 小结
  • 2017-08-06走进工具型网站 对工具型网站的释义及典型案例分析(图文)
  • 2017-08-06css样式div或li在ie6下背景平铺及border边框断线解决技巧
  • 2018-08-23新手入门手册!UI视觉设计师工作流程上的总结与建议

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 超详细的2018年设计师进阶升级指南
    • UX设计在5年内将在哪里?这里有5项预测!
    • 素材太丑?学会这5个方法照样能做好设计!
    • 从这3个层面出发,让你的产品实现人格化
    • 如何去掉超链接下划线用三个简单的实例来说明
    • 想设计出吸引视线的标题?来学这些好用的文字组合技巧
    • 也许你该注意一下影响网页设计的这5个关键指标
    • 网页表单提交方式详细汇总
    • 美工终结者「鲁班智能设计平台」是如何工作的?
    • Google对话式交互规范指南(四):对话UI设计流程与步骤

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有