浅谈网站请求和缓存优化之一

这个话题或许被各路高手谈论过了很多篇，但是我感觉，很多都是伪高手吧，为什么这么说呢，你会发现他们发的代码基本都很雷同，可能个别的地方不一样，比如变量，还有网站名称，呵呵。

网站优化规则中，google告诉我们要注意Combine external JavaScript(合并外部javascript文件)和Combine external CSS(合并外部css样式表文件)还有Combine images into CSS sprites(使用CSS sprites来拼合小图片们)。

yahoo同样告诫我们Make fewer HTTP requests(尽可能减少http请求数量)。

这些道理大家应该都懂吧，我就不赘述了，如果有疑问的话，可以百度或者谷歌一些高手们的文章。

我只说我们这些一般人士该怎么简单的优化网站请求数目和缓存。

首先具体谈谈合并外部css和javascript文件，并且要做到伪装静态文件。以php脚本为例，用包含文件来实现。

<?php
/**
 * Support for Combine external CSS,Compress the content,Modiy http header.
 *
 * @author soulteary@qq.com
 * @website soulteary.com
 */

/**
 * A Loder for combine external CSS
 *
 * @$file string
 */
function CssLoader($file)
{
	$dir_path		=		dirname(__FILE__) . '/';
	$file_path	=		$dir_path.$file;
	include ($file_path);
	echo "\r\n";
	return true;
}

//open gzip mode if it's supported.
if(extension_loaded('zlib')) {ob_start('ob_gzhandler');}

//modiy new http header
//modiy time
$gmdate_mod = gmdate("D, d M Y H:i:s", filemtime(__FILE__));
//expires time, 2 days, of couse, you can use a exact num instead of expression.
$Expires_Time = time() + (7 * 24 * 60 * 60);
//should use gmstrftime("%A %d-%b-%y %T %Z", time());
//but http must contain GMT,so use strftime.
$Expires_Time = strftime("%a, %d %b %Y %I:%M:%S GMT",$Expires_Time );

header ("Content-Type: text/css");
header ("Accept-Ranges: bytes");
header ("Last-Modified: " . $gmdate_mod);
header ('Cache-Control: max-age=315360000');
//also can use a static time strings.
//header ('Expires: ' . $gmdate_mod);
//header ('Expires: ' . 'Wed, 27 Jan 2021 11:01:17 GMT');
header ('Expires: ' . $Expires_Time);

$mode = $_REQUEST["mode"];

//如果没有参数或者参数非数字
if ( empty($mode) ){$mode='WP';}

switch ($mode) {
    case "WP":
        CssLoader("yourpath/reset.css");
        CssLoader("yourpath/style.css");
        break;
    case 'epanel':
        CssLoader("yourpath/panel.css");
        break;
    case "ie7":
        CssLoader("yourpath/ie7style.css");
        break;
    case "ie8":
        CssLoader("yourpath/ie8style.css");
        break;
    case "color":
        CssLoader("yourpath/style-".$color.".css");
        break;
    case "works":
        CssLoader("yourpath/style.css");
        break;
//more choices..
}

//END GZIP FLUSH
if(extension_loaded('zlib')) {ob_end_flush();}
?>

合并JS代码类似,

<?php
/**
 * Support for Combine external CSS,Compress the content,Modiy http header.
 *
 * @author soulteary@qq.com
 * @website soulteary.com
 */

/**
 * A Loder for combine external CSS
 *
 * @$file string
 */
function JsLoader($file)
{
	$dir_path		=	 dirname(__FILE__) . '/';
	$file_path	=	 $dir_path.$file;
	include ($file_path);
	echo "\r\n";
	return true;
}

if(extension_loaded('zlib')) {ob_start('ob_gzhandler');}

//modiy new http header
//modiy time
$gmdate_mod = gmdate("D, d M Y H:i:s", filemtime(__FILE__));
//expires time, 2 days, of couse, you can use a exact num instead of expression.
$Expires_Time = time() + (7 * 24 * 60 * 60);
//should use gmstrftime("%A %d-%b-%y %T %Z", time());
//but http must contain GMT,so use strftime.
$Expires_Time = strftime("%a, %d %b %Y %I:%M:%S GMT",$Expires_Time );


header("Content-Type: text/javascript");
header ("Accept-Ranges: bytes");
header ("Last-Modified: " . $gmdate_mod);
header ('Cache-Control: max-age=315360000');
//also can use a static time strings.
//header ('Expires: ' . $gmdate_mod);
//header ('Expires: ' . 'Wed, 27 Jan 2021 11:01:17 GMT');
header ('Expires: ' . $Expires_Time);



$mode = $_REQUEST["mode"];
if ( empty($mode) ){$mode='WP';}

switch ($mode) {
    case "WP":
        JsLoader("yourpath/jquery.lavalamp.1.3.3-min.js");
        JsLoader("yourpath/jquery.cycle.all.min.js");
        JsLoader("yourpath/superfish.js");
        JsLoader("yourpath/jquery.easing.1.3.js");
        break;
    case "jquery.min":
        JsLoader("yourpath/jquery.min.js");
        break;
    case "jquery-ui.min":
        JsLoader("yourpath/jquery-ui.min.js");
        break;
}

?>
<?php if(extension_loaded('zlib')) {ob_end_flush();} ?>

这样你访问Packed.js.php或Packed.css.php的时候，外部的JS,CSS文件变合并为一个，并使用GZIP压缩后输出了。如果你的外部文件多的话，那么可以节约不少请求数量。

但是访问路径为 http://yourwebsite/yourpath/Packed.js.php 这样不利于SEO路径规则,还好apache等服务器软件支持rewrite。在.htaccess文件中写入规则

#author:soulteary@qq.com
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^/?Packed\.js$ Packed\.js\.php [L]
RewriteRule ^/?Packed\.css$ Packed\.css\.php [L]
</IfModule>

这下，访问路径变为 http://yourwebsite/yourpath/Packed.js了，但是呢传值后，路径会变成难看的http://yourwebsite/yourpath/Packed.js?mode=work 给静态变量传值，属于优化尽量避免的内容 google 告诉我们要“Remove query strings from static resources” 也就是移除静态资源中的请求字串。好吧，apache大神，继续满足我的愿望吧。首先是完善最后的路径样式，比如即使我传值后，我还想保持后缀是.js,防止一些工具或者浏览器抛锚。 http://yourwebsite/yourpath/Packed.js?mode=work&file=2.1.js

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^/?Packed\.js$ Packed\.js\.php [L]
RewriteRule ^/?Packed\.css$ Packed\.css\.php [L]
RewriteRule ^Packed-(.+)-(\d{1}\.\d{2}+)\.js$ Packed\.js\.php?mode=$1&file=$2\.js [L]
RewriteRule ^Packed-(.+)-(\d{1}\.\d{2}+)\.css$ Packed\.css\.php?mode=$1&file=$2\.css [L]
</IfModule>

这样访问脚本的时候，链接就变成了纯正的静态链接，如http://yourwebsite/yourpath/Packed-work-2.1.js 而且因为脚本主动发送了header，即使服务器htaccess设置了set header，也不会造成影响。

明天继续写关于图片缓存的事情吧。

砥砺

浅谈网站请求和缓存优化之一