加速blog：设置浏览器缓存

zhiqiang — Sat, 01 Dec 2007 02:31:14 +0000

在用户浏览blog的不同页面时，很多内容是重复的，比如相同的javascript，css，背景图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件，将大大降低页面产生的流量，从而降低页面载入时间。

根据服务器端的响应header（怎么看HTTP Header），一个文件对浏览器而言，有几级不同的缓存状态。

服务器端告诉浏览器不要缓存此文件，每次都到服务器上更新文件。
服务器端没有给浏览器任何指示（此时我也不知道这时候浏览器将会怎么做），这种情况多为动态脚本（比如PHP）产生的文件。
在上次传输中，服务器给浏览器发送了Last-Modified或Etag数据，再次浏览时浏览器将提交这些数据到服务器，验证本地版本是否最新的，如果为最新的则服务器返回304代码，告诉浏览器直接使用本地版本，否则下载新版本。一般来说，有且只有静态文件，服务器端才会给出这些数据。
服务器强制要求浏览器缓存文件，并设置了过期时间。在缓存未到期之前，浏览器将直接使用本地缓存文件，不会与服务器端产生任何通信。

我们要做的是尽量强制浏览器到第四种状态，特别是对于javascript, css和图片等变动较少的文件。

对于PHP产生的动态内容，只需要在内容输出之前输出强制缓存的header即可，比如下面的代码即要求浏览器缓存文件1个月：

php
  header("Cache-Control: public");
  header("Pragma: cache");

  $offset = 1000*60*60*24; // cache 1 year
  $ExpStr = "Expires: ".gmdate("D, d M Y H:i:s", time() + $offset)." GMT";
  header($ExpStr);
?>

对于静态文件，一般的服务器都支持第3级缓存状态。要想达到第四级的缓存效果，要么像之前GZIP压缩那样，用PHP外包一层，然后用PHP处理。要么需要服务器端的支持，APACHE的一个模块mod_expires支持给文件添加expires header。把下面的代码加入你的blog目录下的.htaccess文件，如果你的服务器安装了mod_expires模块，则将自动生效，图片等强制缓存一个月，html文档缓存10分钟。如果该模块没有安装，也不会出错。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType text/css A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/html A600
IfModule>

在这里有mod_expires更详细的文档和教程。不过我要说明的是，mod_expires在绝大多数服务器上都没安装，因为虽然这个模块包含在Apache的发行版里，但并不是默认安装模块。

Dreamhost上的GZIP & Cache

zhiqiang — Sun, 01 Apr 2007 11:09:54 +0000

用WordPress的都知道，WordPress可以打开GZIP传输，压缩比率能达到60%到80%。下表是本blog首页在Web Page Analyzer上的测试报告，此页面上包括css, js所有东西加起来才14K。

QTY	SIZE#	TYPE	URL
1	6999	HTML	http://zhiqiang.org/blog/
1	2593	SCRIPT	http://zhiqiang.org/blog/.../comment.js.php
1	2302	SCRIPT	http://zhiqiang.org/.../all.js.php
1	2048	CSS	http://zhiqiang.org/.../style.css.php
1	431	IMG	http://feeds.feedburner.com/~fc/zhiqiang
5 ^	14373*		Total (^unique objects)

Dreamhost还用的是Apache 1.3(Am I wrong？)，所以没有mod_deflate模块，而用的是mod_gzip模块，这个模块直接在磁盘上读写，效率比前者要低。不过有总比没有好，毕竟压缩比率很高。

但诡异的是，服务器默认对CSS和JS不作压缩。写信去问了dreamhost客服，也没有什么好方法。最后我采用的方法是用php给包一层：用style.css.php来代替style.css：

php # this is the file style.css.php, who contains style.css
# set the request file name
$file="style.css";

# Set Expires, cache the file on the browse
# Delete it if you don't want it
header("Expires:".gmdate("D, d M Y H:i:s", time()+15360000)."GMT");
header("Cache-Control: max-age=315360000");

# set the last modified time
$mtime = filemtime($file);
$gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';
header("Last-Modified:" . $gmt_mtime);

# output a mediatype header
$ext = array_pop(explode('.', $file));
switch ($ext){
case 'css':
 header("Content-type: text/css");
 break;
case 'js' :
 header("Content-type: text/javascript");
 break;
case 'gif':
 header("Content-type: image/gif");
 break;
case 'jpg':
 header("Content-type: image/jpeg");
 break;
case 'png':
 header("Content-type: image/png");
 break;
default:
 header("Content-type: text/plain");
}

# GZIP the content
if(extension_loaded('zlib')){ob_start();ob_start('ob_gzhandler');}

# echo the file's contents
echo implode('', file($file));

if(extension_loaded('zlib')){
ob_end_flush();
# set header the content's length;
# header("Content-Length: ".ob_get_length()); # (It doesn't work? )
ob_end_flush();
}
?>

上面代码不仅压缩代码，而且要求浏览器端Cache这个文件。甚至，可以把所有css文件都放到一个php文件里，只要在echo处加入多个文件即可。

下面是一些常用的测试网站：

GZIP Test: 测试一个URL地址是否支持GZIP传输，以及压缩比率。
Web Page Analyzer：网站页面速度报告
Cacheability Test: 测试一个页面是否可Cache

参考资料：

阅微堂 » Cache

加速blog：设置浏览器缓存

相关文章

Dreamhost上的GZIP & Cache

相关文章