<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 application/javascript A2592000
ExpiresByType text/javascript A2592000
ExpiresByType text/html A600
</IfModule>

<IfModule mod_deflate.c>
<FilesMatch "\.(js|css|html|htm)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css)$">
Header unset Last-Modified
</FilesMatch>

FileETag none

现在使用Firefox的YSlow插件，以Small Site or Blog标准测试的分数为99分，以YSlow2(V2)标准测试的分数为94分，被扣掉的几分主要是因为没有使用CDN。所以现在速度已经被优化到了极致。

赶快把它放到你的网站或blog根目录下的.htaccess文件里吧。

© zhiqiang for 阅微堂, 2009. | 链接 | 15 条评论

现在很多网站都提供了API，提供比如JSON这样的数据方式以便在blog上引用。比如说picasaweb，我们可以用它来做一个picasa web album的站内镜像，但它的一个缺点就是慢，每次从Google服务器下载会json都会让我的blog停顿2到3秒钟，这让我很不爽。

但利用我的三线服务器，每次我需要数据的时候，我不是直接引用Google提供的js文件，而是通过我自己的服务器来中转这个数据，由于我自己的服务器无论同我自己还是同Google的服务器之间都有很好的速度，从而使得比我直接引用Google的文件还要快。

这便是服务器的中转。更具体的例子是Google Picasa Web提供给我显示相册列表的JSON地址为http://picasaweb.google.com/data/feed/base/user/$username?category=album&alt=json，我只需要像下面这样引用，便能拿到我的相册数据，

<script type="text/javascript" src="http://picasaweb.google.com/data/feed/base/user/mathzqy?category=album&alt=json&callback=showalbum">
</script>

然后我可以再写一个showalbum的js函数来控制相册的显示方式。但在实际中我并没有用这种方式，而是通过一个后台的PHP处理文件来中转这个文件，最后我是这样获取相册数据的：

<script type="text/javascript">
	document.write('<scrip' + 't type="text/javascript" src="feed.php?type=js&uri=' + encodeURIComponent('http://picasaweb.google.com/data/feed/base/user/mathzqy?category=album&alt=json&callback=showalbum') + '"></s' + 'cript>');
</script>

也就是说我向http://zhiqiang.org/feed.php索要所需要的js文件，feed.php在服务器上会从Google的服务器上下载所需要的文件，然后转发给我。由于服务器同Google的服务器之间的连接更快更稳定，所以这样比我直接向Google索要此文件还要快。

通过服务器中转的更大的好处是，我可以在服务器上缓存数据。这样不同的用户所要相同的文件时，服务器端可以直接从缓存里读取文件发送给用户，这样速度就更快了。缓存有两种形式，存到数据库或者缓存到文件里。著名的Twitter Tools便将数据缓存在数据库里，每1小时更新一次。当如果自己写的话，缓存到文件更方便。下面的feed.php为一个简单的服务器端中转和缓存处理代码(注意修改$cache_path和$snoopy_file路径)：

<?php
  // feed.php, to cache and transfer data
  // example: feed.php?uri=http://zhiqiang.org/blog/feed&type=xml

  // the request uri  
  $rss_uri = stripslashes($_REQUEST['uri']);
  $rss_uri = str_replace(array('"', ' '), array('%22','%20'), $rss_uri);
  // the request file type
  $file_type  = isset($_REQUEST['type']) ? $_REQUEST['type'] : 'xml';
  // the refresh time, control how much time the cache kept, 
  // default cache 1 hour.
  $refresh    = isset($_REQUEST['refresh']) ? $_REQUEST['refresh'] : 3600000;
  // the cache file directory, make sure the directory is writeable
  $cache_path = 'cache/';
  // this script need class snoopy.
  $snoopy_file = '/wp-includes/class-snoopy.php';

  // send HTTP header
  switch ($file_type){
    case 'css':
      header("Content-type: text/css");
      break;
    case 'js' :
      header("Content-type: application/x-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");
  }

  $rss_hash = md5($rss_uri);
  $cache_rss_path = $cache_path.$rss_hash.'.'.$file_type;
  if ( !is_file($cache_rss_path) || time()-filemtime($cache_rss_path) > $refresh) {
    if (!class_exists('Snoopy')) require_once ($snoopy_file);

    $snoopy = new Snoopy;
    $snoopy->fetch($rss_uri);
    // this will copy the created tex-image to your cache-folder
    $cache_file = fopen($cache_rss_path, 'w');
    fputs($cache_file, $snoopy->results);
    fclose($cache_file);

    echo $snoopy->results;

  } else {
    $content = file_get_contents ($cache_rss_path);
    echo $content;
  }
?>

© zhiqiang for 阅微堂, 2007. | 链接 | 3 条评论

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

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

我们要做的是尽量强制浏览器到第四种状态，特别是对于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的发行版里，但并不是默认安装模块。

© zhiqiang for 阅微堂, 2007. | 链接 | 2 条评论

为减少页面上的背景图片数量，嵌入式图片是一个好主意，data: URL scheme可以让你把图片信息直接嵌入在CSS语句中，理论上而言这是最好的解决方案。可惜目前IE不支持！又是万恶的IE。下面是效果图(Firefox有效)：

另外一个就是CSS Sprites了，很久以前就见到过，不过操作比较复杂，所以一直没有用。今天，看到一个更详细的介绍，而且Yahoo和Facebook都在用这种方式，见这里和这里。我也决定紧跟一下潮流。

CSS Sprites就是将网页上所有的背景图片都放在一张大图片上，更详细的介绍

在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现......我们的主角是，你一定猜到了，就是background-position。通过调整background-position的数值，背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变，由于图片位置的改变，你看到只该看到的而已。就好比手表上的日期，你今天看到是21，明天看到是22，是因为它的position往上跳了一格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。

比如本站的所有背景图片已经整合成单独一张，然后通过CSS定义背景：

.bloglines, .zhuaxia, .google, {
    background-image: url(images/b.gif);
}

.bloglines { background-position: 0 -216px; }
.zhuaxia { background-position: 0 -332px; }
.google { background-position: 0 -448px; }

上面这一段代码用同一张背景图片生成了Google，Zhuaxia，Bloglines的订阅图片。效果可见右侧栏的订阅区，与各自指定图片背景效果完全一样。

上面最麻烦的一个地方在于如何生成大图片，利用PhotoShop的Merge功能可以把图片整合在一起，但每个小图片在大图片的位置参数需要一个一个去弄，比较麻烦，但是比较自由。利用CSS Sprites Generator，一切都自动搞定。这个网站支持上传图片的ZIP压缩包，然后生成一张大图片，已经以图片文件名为类名的CSS语句，自动给出每个图片对应的位置。另外还可以设置各个小图片之间的间隔，以适应内容的适度拉伸。

btw，提一下一个APACHE的mod_expires模块，这个模块可以要求服务器缓存制定类型的文件。比如下面的语句(写入.htaccess文件)要求缓存图片, css, js等一个月：

<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>

不过似乎deamhost和bluehost都没有这个模块，但阅微堂所在的CPH服务器是有的... 

© zhiqiang for 阅微堂, 2007. | 链接 | 17 条评论