巧用htaccess客户端网页缓存实现网站加速

!本文可能 超过1年没有更新,今后内容也许不会被维护或者支持,部分内容可能具有时效性,涉及技术细节或者软件使用方面,本人不保证相应的兼容和可操作性。

网站加快访问速度的一个基本原则就是减少HTTP请求数,在我们实现了合并CSS和脚本,使用了图片CSS Sprites后,发现YSlowPageSpeed的评分并没有提高(当然淘宝UED团队给了我们一个新的优化思路,不必拘泥于这两个工具,详细请见这里),仔细研究后才发现原来我们没有很好的利用客户端缓存,仔细分析了淘宝等大网站的HTTP反馈信息如下。

淘宝网

1
2
3
Date: Tue, 22 Feb 2011 14:02:56 GMT
Expires: Tue, 22 Feb 2011 15:02:56 GMT
Cache-Control: max-age=3600

腾讯QQ

1
2
3
Date: Tue, 22 Feb 2011 14:04:26 GMT
Expires: Tue, 22 Feb 2011 14:19:26 GMT
Cache-Control: max-age=900

网易163

1
2
3
Date: Tue, 22 Feb 2011 14:07:35 GMT
Expires: Tue, 22 Feb 2011 14:08:21 GMT
Cache-Control: max-age=80

都可以看到这些网站有个共同点就是使用了Cache-Control控制了客户端的网页缓存,这样,客户端在频繁访问网站时不必每次都向服务器发出请求,大大提高访问的速度和减轻了服务器的负担。

Cache-Control的关键部分就在于max-age,其值代表缓存的时间,单位为秒,对于较快更新的网站这个时间应该短一些,对于更新较慢的网站,这个时间应该长一些,对于个人博客,我认为这个值可以设定为600(10分钟),当然如果时间过长的话,可能评论文章需要刷新或等待指定时间过后才能看见。

对于客户端缓存控制,还有Pragma和ETag值得注意,一般情况下Param: no-cache,代表不缓存文件,当然我们要缓存就必须去掉这项,有关ETag,在查询HTTP反馈后发现是一个标识符,也就是说客户端在收到这个页面的时候会记下这个ETag标识,当再次访问时,客户端将把这个ETag发回给服务器,服务器在收到这个ETag后,会与当前的ETag进行对比,如果一致,代表页面没有改动,直接反馈304 Not Modified的消息,这样浏览器就直接在本地取出缓存页面。实际考察下来发现大多数Web应用均没有实现对ETag的管理控制,所以保留这个信息对于这些应用来说纯属浪费,完全可以去掉,去掉Pragma和ETag头信息可以在.htaccess输入下面两行。

1
2
3
4
5
<FilesMatch ".(html|htm|php|txt)$">
Header unset Pragma
Header unset ETag
FileETag None
</FilesMatch>

其中html|htm|php|txt对应的是要处理的文件类型扩展名。再解决了这两项后,下面可以添加Cache-Control信息了,这里我们设定为10分钟。原来的.htaccess配置如下。

1
2
3
4
5
6
<FilesMatch ".(html|htm|php|txt)$">
Header unset Pragma
Header unset ETag
FileETag None
Header set Cache-Control "max-age=600"
</FilesMatch>

同样的道理,我们知道一般网站上图片、样式表、脚本文件等等都是基本上不改动的,我们可以通过下面的代码将其缓存时间设定长一些。

1
2
3
4
5
6
<FilesMatch ".(gif|jpg|jpeg|png|ico|css|js)$">
Header unset Pragma
Header unset ETag
FileETag None
Header set Cache-Control "max-age=315360000"
</FilesMatch>

怎么样,是不是觉得时间太长了,假如我要改个样式,客户端可能需要刷新才能看见,那怎么办?我们知道,前面对于网页设置了个比较短的时间,也就是说网页在那个时间过后就需要重新到服务器上获取最新版。我们可以在引用的样式表style.css的后面加上style.css?t=20110222这样的时间戳,当然为了照顾一些特殊的浏览器,一般建议这样写style.css?t=20110222.css,当你改动了样式表后,你只需要对网页里的link引用的样式表时间戳进行修改即可。

1
<link rel="stylesheet" href="style.css?t=20110222.css" type="text/css" />

好吧,做完这些,我们可以歇口气喝杯咖啡了?等等,你会发现把配置好的.htaccess文件上传到网站根目录下,然后你登录博客后台时一些后台操作变得不正常了,比如我们删掉一条记录,系统提示删除成功,但是当你返回的时候,发现那条记录仍然存在,真的是这样吗?当你再刷新下该页,才发现那条记录已经没了,聪明的你应该晓得是怎么回事了,对!就是缓存在作怪。

所以我们需要去掉后台管理页面的缓存,假设后台管理路径是/admin/,我们可以针对该文件夹单独配置个.htaccess,内容如下。

1
2
3
4
5
6
<FilesMatch ".(html|htm|php|txt)$">
Header unset ETag
FileETag None
Header set Cache-Control "no-cache, no-store, max-age=0, must-revalidate"
Header set Pragma "no-cache"
</FilesMatch>

好了,就是这么简单,做完这一切,现在访问你的网站看看,是不是感觉不错:-)

另外还有种设置缓存的方法可以参考《How to Set an Expires Header in Apache》这篇文章。

若无特别说明,本网站文章均为原创,原则上这些文章不允许转载,但是如果阁下是出于研究学习目的可以转载到阁下的个人博客或者主页,转载遵循创作共同性“署名-非商业性使用-相同方式共享”原则,请转载时注明作者出处谢绝商业性、非署名、采集站、垃圾站或者纯粹为了流量的转载。谢谢合作!

请稍后...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*