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

所属分类: 网页制作 / 应用技巧 阅读数: 1580
收藏 0 赞 0 分享

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

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

方法一

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


复制代码
代码如下:
<link rel="stylesheet" href="style.css" />

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


复制代码
代码如下:
<link rel="stylesheet" href="index.css" />

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


复制代码
代码如下:
<link rel="stylesheet" href="index.v2011.css" />

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


复制代码
代码如下:
<link rel="stylesheet" href="index.v2012.css" />

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


复制代码
代码如下:
<link rel="stylesheet" href="style.css?v=2011" />

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


复制代码
代码如下:
<link rel="stylesheet" href="style.css?v=2012" />

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

总结

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

更多精彩内容其他人还在看

关于favicon.ico的两三事(最好就是放根目录)

最近网站开始改版,如果文档中没有声明favicon.ico,在chrome浏览器中会自动加载根目录的favicon.ico,正好将具体的分析也分享一下, 方便需要的朋友
收藏 0 赞 0 分享

分享10个最新的Web前端框架(翻译)

前端Web框架的本质就是JavaScript,CSS和HTML相关组件的集合,你可以把它应用到日常的项目中,可以极大节省开发时间,特别是在那些紧急的项目中。这里,我们为大家列出了10个前端Web框架,可以参考
收藏 0 赞 0 分享

分享15个最佳的HTML/CSS设计和开发框架

高效的框架不仅是网站设计的基础,它提供的各种丰富多彩的功能,还提高整体的功能和性能。一个网站的外观和设计完全可以通过一些完美和可靠的工具而彻底改头换面。现在,越来越多的网页设计师和编辑人员选择使用CSS框架来创建网站
收藏 0 赞 0 分享

关于启用 HTTPS 的一些经验分享

这篇文章主要介绍了关于启用 HTTPS 的一些经验分享,需要的朋友可以参考下
收藏 0 赞 0 分享

人人必知10个网站易用性技巧

这篇文章主要介绍了人人必知10个网站易用性技巧 的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS3实用方法总结(推荐)

下面小编就为大家带来一篇CSS3实用方法总结(推荐)。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Web前端开发中找错的基本思路

本文给大家分享了在制作web前端页面的时候,找错、查错以及解决错误的方法,非常的详细,这里推荐给大家,希望对大家能有所帮助。
收藏 0 赞 0 分享

深入理解指定IE浏览器渲染方式

本文详细向大家讲解了IE浏览器设置只能渲染方式的方法及其含义。前端设计师们比较痛恨的浏览器就是IE了,没有之一!!今天主要来探讨设置兼容性即指定IE浏览器渲染方式。
收藏 0 赞 0 分享

让网页自动调用双核浏览器的极速模式(Webkit)

国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站
收藏 0 赞 0 分享

如何设计制作自适应网页

本文介绍了
收藏 0 赞 0 分享
查看更多