背景
在搜索引擎中搜索关键字.htaccess缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css、js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从缓存中获取css、js等静态文件,而不必从你的服务器再次下载读取,这样在一定程度上加快了网站的打开速度,又可以节约一下你的服务器流量。
问题
最近在修改更新我的IT-Homer博客时,遇到了一个问题:本地更新了style.css后,不管怎么更新CDN缓存,还是Ctrl + F5 刷新浏览器,博客仍然加载的旧的style.css文件。
现在问题来了,通过.htaccess设置的css、js缓存都有一个过期时间,如果在访客的浏览器中已经缓存了css、js,在这些css、js缓存未过期之前,浏览器只会从缓存中读取css和js,如果你在服务器上修改了css和js,那么这些更改在回头客的浏览器中是不会有变化的,除非回头客按了Ctrl + F5刷新了你的网站页面或者手动清空了浏览器的缓存。一个网站的访客成千上万,回头客也会有不少,你不可能在更新css后让每个访客都刷新一下缓存吧,那么这个问题你会怎么处理呢?
处理办法
1. 更改css文件名
其实解决这个问题很简单,缓存是通过文件名(例如:style.css,style.min.css,style.min.v2.css等)标记缓存内容的。在你更新了网站的css文件内容后,在更换一下css的文件名就可以了。如原先html中的css调用语句如下:
<link rel=”stylesheet” href=“http://blog.ithomer.net/wp-content/themes/officefolders/style.css” type=”text/css” media=”screen” />
改一下css文件名就可以了:
<link rel=“stylesheet” href=”http://blog.ithomer.net/wp-content/themes/officefolders/style.min.css” type=”text/css” media=”screen” />
另外一种从更改css文件名的方法是将版本号写到文件名中,如:
<link rel=”stylesheet” href=”http://blog.ithomer.net/wp-content/themes/officefolders/style.min.v1.0.0.css” type=”text/css” media=”screen”/>
css文件更新后,改一下文件名中的版本号即可:
<link rel=”stylesheet” href=”http://blog.ithomer.net/wp-content/themes/officefolders/style.min.v1.0.1.css” type=”text/css” media=”screen”/>
2. 给css文件加个版本号
其实每次修改css文件后还要修改css的文件名有点麻烦,那么我们可以在加载css语句中加入个版本号(即css链接中?后面的内容)就可以了,由浏览器自动去比较css,js链接后面的版本号大小,来自动更新客户端最新的css,js等静态文件。
例如原先html中的css调用语句如下:
<link rel=”stylesheet” href=“http://blog.ithomer.net/wp-content/themes/officefolders/style.min.css?ver=1.0.0”type=”text/css” media=”screen”/>
改一下css文件的版本号改成2012就可以了:
<link rel=”stylesheet” href=“http://blog.ithomer.net/wp-content/themes/officefolders/style.min.css?ver=1.0.1”type=”text/css” media=”screen”/>
总结
其实css,js文件后面的问号不起实际作用,仅能当作后缀,让浏览器自动检测更新最新的css,js等静态文件。如果用问号加参数的方法,可以添加版本号等信息,同时可以刷新一下浏览器端的缓存。一个小小的细节,可以给我们带来很大的方便。
示例请见我的博客:IT-Homer 博客或IT-Homer 河马代理
分享到:
相关推荐
基于html+css+js实现的模仿华为商城静态网页源码+项目说明(附静态网页效果链接).zip 课程作业 静态网页设计实现 模仿华为商城静态网页源码 附静态网页效果链接 项目说明 html+css+js实现 基于html+css+js实现的...
动态添加css或js链接
使用HTML、CSS和JavaScript开发Android程序 英文名称:Building Android Apps with HTML, CSS, and JavaScript 本资源为这本书的所有原代码
HTML+CSS+JavaScript网页模板
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...
Html+Css+Javascript从入门到精通.pdfHtml+Css+Javascript从入门到精通.pdf
使用HTML,CSS和JS构建的可编辑简历模板
韩顺平 html+css+js笔记,配合视屏看效果更佳。
学习Html、CSS和JS的小项目学习Html、CSS和JS的小项目 学习Html、CSS和JS的小项目学习Html、CSS和JS的小项目 学习Html、CSS和JS的小项目学习Html、CSS和JS的小项目 学习Html、CSS和JS的小项目学习Html、CSS和JS的小...
个人博客,基于html+css+JavaScript的完整代码,内容全面可以直接使用。
简单登录注册界面模板(HTML+CSS+JavaScript)。简单登录注册界面模板(HTML+CSS+JavaScript)。简单登录注册界面模板(HTML+CSS+JavaScript)。 简单登录注册界面模板(HTML+CSS+JavaScript)【登录注册界面代码】
标题:HTML、CSS和JS:打造出色的网页设计 概述:网页设计是一门综合性的艺术,其中HTML、CSS和JS是构建网页的三种基本技术。本文将介绍如何利用HTML、CSS和JS设计出色的网页,以提供良好的用户体验和视觉吸引力。 ...
html+css+jshtml+css+jshtml+css+jshtml+css+js
html css js学习html css js学习html css js学习html css js学习 html css js学习html css js学习html css js学习html css js学习 html css js学习html css js学习html css js学习html css js学习 html css js学习...
html css js 学习html css js 学习html css js 学习html css js 学习 html css js 学习html css js 学习html css js 学习html css js 学习 html css js 学习html css js 学习html css js 学习html css js 学习 html ...
基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip 基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip 基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip 基于HTML+CSS+JavaScript 制作的网页...
html+css+js网页设计之个人博客网页【html+css+js】html+css+js网页设计之个人博客网页【html+css+js】html+css+js网页设计之个人博客网页【html+css+js】html+css+js网页设计之个人博客网页【html+css+js】...
学习html+css+js学习html+css+js学习html+css+js学习html+css+js 学习html+css+js学习html+css+js学习html+css+js学习html+css+js 学习html+css+js学习html+css+js学习html+css+js学习html+css+js 学习html+css+js...
HTML+CSS+JS学习HTML+CSS+JS学习HTML+CSS+JS学习 HTML+CSS+JS学习HTML+CSS+JS学习HTML+CSS+JS学习 HTML+CSS+JS学习HTML+CSS+JS学习HTML+CSS+JS学习 HTML+CSS+JS学习HTML+CSS+JS学习HTML+CSS+JS学习 HTML+CSS+JS学习...
用HTML+CSS+JS构建的电商网站页面平台(完整代码),web前端CSS入门项目。简易读懂,适合学生以及课程报告参考用。