Web性能优化:合并JavaScript和CSS文件

Web性能优化最佳实践中最重要的一条是减少HTTP请求，它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射（Image Map）和使用Data URI来编码图片。CSS Sprites 和 图像映射现在已经随处可见了，但由于IE6和IE7不支持Data URI以及性能问题，这项技术尚未大量使用。目前大部分网页中的JavaScript和CSS文件数量和开发时一致，少量的网页会根据实际情况采取本地合 并，这些合并中相当多的是有选择地手动完成，每次新的合并都需要重新在本地完成并上传到服务器，比较的随意和繁琐，同样文件的压缩也有类似的情况。而利用 服务端的合并和压缩，我们就可以按照开发的逻辑尽可能让文件的颗粒度变小，利用网页中URL的规则来自动实现文件的合并和压缩，这会相当的灵活和高效。

YUI Combo Handler

2008年7月YUI Team宣布在YAHOO！ CDN上对YUI JavaScript组件提供Combo Handler服务。Combo Handler是Yahoo！开发的一个Apache模块，它实现了开发人员简单方便地通过URL来合并JavaScript和CSS文件，从而大大减少 文件请求数。比如在页面上使用YUI2的Rich Text Editor组件需要引入多个JavaScript文件，常用方式如下：

 

<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/editor/editor-min.js"></script>

而使用Combo Handler服务之后，则上述的代码可以写为：

 

<script src="http://yui.yahooapis.com/combo?
2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&
2.8.0r4/build/container/container_core-min.js&
2.8.0r4/build/menu/menu-min.js&
2.8.0r4/build/element/element-min.js&
2.8.0r4/build/button/button-min.js&
2.8.0r4/build/editor/editor-min.js"></script>

除了代码的可读性稍稍有一点点降低外，使用Combo Handler服务大大的降低了HTTP请求数，同时也减少了URL代码量，这对于Web性能优化来讲至关重要。所以，随后YUI从2.6.0开始，其核 心组件YUI Loader内置了Combo Handling功能，即使用YUI Loader时，通过配置combine属性就可以把要加载的多个JavaScript或CSS文件按照使用Combo Handler服务的形式合并起来，这时只要静态文件的服务器支持Combo Handler就行了。在YUI中当combine配置为true时，CDN默认是使用Yahoo！ CDN（http://yui.yahooapis.com），所以没有任何问题。这正是YUI最迷人的地方之一。

遗憾的是http://yui.yahooapis.com在中国的速度并不佳，本来中国雅虎提供http: //cn.yui.yahooapis.com/ ，但尚未提供Combo Handler服务，同时因种种原因，其更新在YUI 2.7.0之后就停滞了。更糟糕的是Yahoo！开发的支持Combo Handler的Apache模块虽然据传有计划开源，但至少现在依旧是私有技术，要使用就需要自己实现类似功能，所以国内类似技术的应用并不太多。

Minify

在Google Code上有一个PHP的开源项目叫Minify，它可以合并、精简、Gzip压缩和缓存JavaScript和CSS文件。其文件合并功能就非常类似 Combo Handler，只不过URL的语法稍微有点不同。如果Yahoo！ CDN安装了Minify，那么上面Rich Text Editor的代码用Minify的默认格式来写就是：

 

<script src="http://yui.yahooapis.com/min/f=
2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js,
2.8.0r4/build/container/container_core-min.js,
2.8.0r4/build/menu/menu-min.js,
2.8.0r4/build/element/element-min.js,
2.8.0r4/build/button/button-min.js,
2.8.0r4/build/editor/editor-min.js"></script>

本地使用Minify很简单，只需要Apache + PHP环境就OK了：

安装好Apache + PHP （Windows、Mac）。

下载Minify源码，解压，然后把min文件夹复制到指定的根目录下，比如localhost。这时URL的写法大概是http://localhost/min/f=。..

启用Apache的Mod Rewrite模块，然后在min文件夹下新建.htaccess文件，并添加如下Rewrite规则：

 

<IfModule mod_rewrite.c>
RewriteEngine on
# You may need RewriteBase on some servers
# 如果做了所有的开启Mod Rewrite的设置依旧无效，请城市尝试启用下面这句
#RewriteBase /min
# rewrite URLs like "/min/f=..." to "/min/?f=..."
RewriteRule ^([bfg]=.*)  index.php?$1 [L,NE]
</IfModule>

如果不启用Mod Rewrite功能，则Minify的URL会类似http://localhost/min/index.php?f=…，这对客户端和中间服务器的缓 存不利，而启用了Mod Rewrite之后的URL类似http://localhost/min/f=…，不仅解决前面问题且更短。

4. 配置Minify，即编辑min/config.php文件

 

$min_enableBuilder = true;
//本地使用时可以通过http://dwn/min/builder/来进行配置，外部使用时请设置为false
//$min_cachePath = 'c:\\WINDOWS\\Temp';
//$min_cachePath = '/tmp';
//$min_cachePath = preg_replace('/^\\d+;/', '', session_save_path());
//选择其一，去掉注释设置临时缓存目录，这样可以减少程序运算提高性能
$min_serveOptions['maxAge'] = 1800;
//设置浏览器缓存的时间，为了提升性能建议这个时间设置尽可能的长，比如315360000
//如果需要在不改变URL的情况下更新静态文件，可以采用类似时间戳的方式，
//如http://localhost/min/f=example/example.css&20100601.css
//建议静态文件采用版本号管理，每次修改都需要升级版本号，这样就无需时间戳了
//如http://localhost/min/f=example/example_1_0_1.css
$min_serveOptions['minApp']['maxFiles'] = 10;
//参数f获取参数的个数，即合并的文件个数，这个数量完全可以增大，比如50，
//当然可能会遇到URL最大值问题，后会有解释
$min_documentRoot = '';
//$min_documentRoot = substr(__FILE__, 0, strlen(__FILE__) - 15);
//$min_documentRoot = $_SERVER['SUBDOMAIN_DOCUMENT_ROOT'];
//当$min_documentRoot为空时，其值就是$_SERVER['DOCUMENT_ROOT']，
//但合并的文件不在$_SERVER['DOCUMENT_ROOT']下，会导致400错误，
//这个时候可以启用第2行或第3行

4. 配置Minify，即编辑min/config.php文件

 

$min_enableBuilder = true;
//本地使用时可以通过http://dwn/min/builder/来进行配置，外部使用时请设置为false
//$min_cachePath = 'c:\\WINDOWS\\Temp';
//$min_cachePath = '/tmp';
//$min_cachePath = preg_replace('/^\\d+;/', '', session_save_path());
//选择其一，去掉注释设置临时缓存目录，这样可以减少程序运算提高性能
$min_serveOptions['maxAge'] = 1800;
//设置浏览器缓存的时间，为了提升性能建议这个时间设置尽可能的长，比如315360000
//如果需要在不改变URL的情况下更新静态文件，可以采用类似时间戳的方式，
//如http://localhost/min/f=example/example.css&20100601.css
//建议静态文件采用版本号管理，每次修改都需要升级版本号，这样就无需时间戳了
//如http://localhost/min/f=example/example_1_0_1.css
$min_serveOptions['minApp']['maxFiles'] = 10;
//参数f获取参数的个数，即合并的文件个数，这个数量完全可以增大，比如50，
//当然可能会遇到URL最大值问题，后会有解释
$min_documentRoot = '';
//$min_documentRoot = substr(__FILE__, 0, strlen(__FILE__) - 15);
//$min_documentRoot = $_SERVER['SUBDOMAIN_DOCUMENT_ROOT'];
//当$min_documentRoot为空时，其值就是$_SERVER['DOCUMENT_ROOT']，
//但合并的文件不在$_SERVER['DOCUMENT_ROOT']下，会导致400错误，
//这个时候可以启用第2行或第3行

 

转自：http://www.yindaoxian.com/html/web/Javascript_Ajax-13828.html