解决缓存引发的CSS/JS/IMG问题

时间：2009-11-6     作者：smarteng     分类： 服务器相关

这次转载的文章讲的是CSs缓存的问题。CSS一般情况下，我们都会做一定的缓存，毕竟这玩意很少会动它，但对于一个稍大一点的网站来说，它就可能会经常变动了。
然而，CSS对于浏览器来说，一般情况下是会被自动缓存的，所以我在导入CSS的时候，都会制定一个版本号放在文件后面如：xxx.css?20091010，下次更新的时候，把这个日期改一下。用户在加载的时候会认为这是一个新文件 。。。

以下是博客园的用户写的文章 ：[break]

如何平衡的使用浏览器缓存？平时我们借助缓存来减少用户加载页面文件（比如js,css,image等）的时间和带宽，同时我们要确保用户访问的上述文件时最新的。而后者是我们常常头疼的问题。
本文主要介绍一些小的技巧来确保在网站文件被缓存的同时，又可以得到良好的性能和最新的更新的网站内容。
问题描述
比如我们在某页面加载了css文件，
<link rel="stylesheet" href="/css/styles.css" type="text/css" />
如何优化页面访问的性能呢？
手段1、使用缓存。通常我们希望此文件被浏览器缓存一定的时间，这样可以用户访问此页面的时候不必每次都向服务器请求下载此文件。我们也可以配置服务器在页面添加”Expires”头信息，从而告诉浏览器缓存此文件的时间。
手段2、我们使用yuicompressor等压缩工具对css文件进行压缩，减小文件的大小。
问题是当因版面风格的更新，此css已经做了更新，但是用户可能仍然使用的是旧的页面主题，甚至错乱的页面。这样对用户的体验非常不好。
解决之道：
根本原理：欺骗浏览器，让它认为它加载的文件跟缓存的文件不一样。
方法一、修改文件名
<link rel="stylesheet" href="/css/styles.1234.css" type="text/css" />
方法二、增加Query string
<link rel="stylesheet" href="/css/styles.css?v=1234" type="text/css" />
方法三、修改引用文件路径
这里最好的是在服务器配置文件中进行配置来实现文件路径映射（url mapping）。
<link rel="stylesheet" href="/css.1234/styles.css" type="text/css" />
以上我们以css为例进行了说明，我们来看看图片和js文件。
Images
由于图片的引用一般写在css文件中，并采用相对路径，所以当css的引用路径发生变化的时候，根据重写规则，图片被解析的路径自然会同步发生更新。
JS
适用于css的方法同样都适用于JS。
结束语
当然web站点性能的优化，除了缓存之外，还有许多的方法。比如我们可以借助YSlow来帮助用户得到最好的体验。

 
其实方法都差不多。为了所谓的 yahoo 的N条军规，大家都在互相折腾。
之所以是N，是因为以前是14条，后来加过两次。就忘了几条了。firebug的插件yslow也可以做简单的测试哦

 

作者：MingleLui
出处：http://mingle.cnblogs.com/
 

上一篇:php中对提交数据的安全处理 下一篇:PHPCMS
smarteng
smarteng

人生就流星，虽然转瞬即逝，但也有永恒。

恰饭
分类
热门文章
最新日志
存档
标签
timestamp datetime time awk 技术文章 SEM 营销 赚钱 go-zero 抓包 测试覆盖率 系统 hostname goquery mockgen gomock validator urldecode urlencode redirect context port pulsar Consul epoll yaml 错误处理 code-review xlsx excel c 读书 阅读 写作 生活 shen 统计 test Module mod 效率 无密码 天网 Future video computer tmux ce Logrotate supervisor command screen rsa java markdown 测试 水平居中 error brew homebrew http nodejs composer 工具 框架 gopath gomod golang go 播放器 服务器 腾讯云 单元测试 爬虫 命令 emlog replace 模型 PHP升级 阿里云 习惯 group_concat SQL Server PHPExcel 面试 单点登录 开源项目 tag guid yaf md5 博客 微博 团队 Geolocation Mac 客户端 网赚 豆瓣 编程语言
京东