Web性能优化最重要的一个更佳实践就是减少HTTP请求，这也是YSlow更大的规则。减少HTTP请求的主要解决方案包括合并JavaScript和CSS文件、CSS精灵、图像映射和使用数据URI对图片进行编码。CSS Sprites和图像映射现在随处可见，但是这项技术还没有得到广泛应用，因为IE6和IE7不支持数据URI和性能问题。目前大部分网页的JavaScript和CSS文件数量和开发中一样，少数网页会根据实际情况进行局部合并。这些合并很多都是选择性手动完成的，每一个新的合并都需要在本地完成，上传到服务器，比较随意繁琐，文件的压缩也差不多。利用服务器的合并和压缩，可以按照开发的逻辑使文件的粒度尽可能小，利用网页中URL的规则自动实现文件的合并和压缩，会相当灵活高效。

一、YUI Combo Handler

2008年7月，YUI团队宣布加入雅虎！组合处理器服务是为CDN上的YUI JavaScript组件提供的。Combo Handler是雅虎！开发了一个Apache模块，使得开发人员可以很容易的通过URL合并JavaScript和CSS文件，从而大大减少了文件请求的数量。例如，在页面上使用YUI2的富文本编辑器组件需要引入多个JavaScript文件，通常使用如下：

script src=' http://yui . Yahoo API.com/2 . 8 . 0 R4/build/Yahoo-DOM-event/Yahoo-DOM-event . js '/script script src=' http://yui . Yahoo API.com/2 . 8 . 0 R4/build/container/container _ core-min . js '/script script src=' http://yui . Yahoo API.com/2 . 8 . 0 R4/build/menu/menu-min . js '/script script script

使用组合处理程序服务后，上面的代码可以写成：

script src=' http://yui . Yahoo API.com/combo？2 . 8 . 0 R4/build/Yahoo-DOM-event/Yahoo-DOM-event . js 2 . 8 . 0 R4/build/container/container _ core-min . js 2 . 8 . 0 R4/build/menu/menu-min . js 2 . 8 . 0 R4/build/element/element-min . js 2 . 8 . 0 R4/build/button/button-min . js 2 . 8 . 0 R4/build/editor/editor-min . js '/script

除了代码可读性略有降低之外，使用Combo Handler服务，HTTP请求的数量和URL代码的数量都大大减少，这对Web性能优化非常重要。因此，YUI从2.6.0开始，其核心组件YUI加载器内置的组合处理功能，即在使用YUI加载器时，只要静态文件的服务器支持组合处理程序，就可以通过配置组合属性，将多个要加载的JavaScript或CSS文件组合成组合处理程序服务的形式。在YUI，当联合设置为真时，CDN使用雅虎！CDN (yui.yahooapis.com)，所以没有问题。这是YUI最迷人的地方之一。

不幸的是，yui.yahooapis.com在中国的速度并不好。雅虎中国最初提供cn.yui.yahooapis.com/,但它没有提供组合处理器服务。同时，由于各种原因，其更新在YUI 2.7.0之后停止。更糟糕的是雅虎！虽然传闻开发的支持Combo Handler的Apache模块是开源的，但至少现在还是私有技术，需要自己实现类似的功能，所以国内类似技术的应用并不多。

二、Minify

有一个PHP开源项目叫Minify on Google Code，可以合并、精简、Gzip压缩、缓存JavaScript和CSS文件。它的文件合并功能和Combo Handler很像，只是URL的语法略有不同。如果雅虎！CDN安装了Minify，所以上面富文本编辑器的代码是用Minify的默认格式写的：

script src=' http://yui . Yahoo API.com/min/f=2 . 8 . 0 R4/build/Yahoo-DOM-event/Yahoo-DOM-event . js，2 . 8 . 0 R4/build/container/container _ core-min . js，2.8.0r4/build/menu/menu-min.js，2 . 8 . 0 R4/build/element/element-min . js，2 . 8 . 0 R4/build/button/button-min . js，2 . 8 . 00

1）使用Minify

在本地使用Minify很容易，只需要Apache PHP环境就可以了：

安装Apache PHP (Windows，Mac)。

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

启用Apache的Mod重写模块，然后创建一个新的。请访问最小文件夹下的文件，并添加重写规则[1]。如果没有启用Mod Rewrite函数，Minify的URL将类似于http://localhost/min/index.php。F=…，不利于客户端和中间服务器的缓存，启用Mod Rewrite后的URL类似于http://localhost/min/f=…，不仅解决了前面的问题，而且更短。

配置Minify，即编辑min/config.php文件[2]

使用Minify。例如，如果有两个JavaScript文件，http://localhost/example/a.js和http://localhost/example/b.js，那么与Minify合并的URL就是http://localhost/min/f=/example/a . js，/example/b.js，你可以直接把这个URL放到页面上使用。实际上，Minify不仅实现了合并功能，还默认压缩了文件。如果您在本地压缩文件，例如使用YUI压缩程序，您可以在config.php设置以下设置来取消压缩Minify以提高性能[3]。如果服务器支持Java，您也可以简单地配置Minify，通过使用YUI压缩器来压缩JavaScript和CSS文件。服务器端直接合并压缩非常灵活，大大减少了前端开发结果的部署过程，真的事半功倍。更多配置请参见迷你烹饪书和维基。

2)在YUI3中使用Minify

在YUI2中，合并机制只支持库本身的文件，定制的文件会单独加载。从YUI3开始，模块变小，导致使用合并时URL变长。但是在IE下，URL的更大值是2083，Apache的默认URL是8192。所以当URL超过对应浏览器下的更大值时，YUI3会根据浏览器的判断自动拆分成多个合并的URL，同时还提供maxURLLength来设置更大值。从YUI3.1.0开始，不仅支持自定义文件的合并，还支持使用多个提供合并服务的CDN，即YUI组件可以使用yui.yahooapis.com CDN，其他文件可以使用其他支持合并的CDN，非常实用、方便、灵活。例子用YUI3中的Minify来说明这一点。由于YUI默认URL的合并形式与Minify不同，在实例化YUI时需要使用正则替换来实现支持Minify的YUI3的URL合并形式，但这种方法不灵活、有风险、不友好且效率低下。比较简单的方法是直接修改YUI 3的源代码，比如在修改后的YUI3中使用Minify。同时，YUI 3.1的版本。*有一个bug，就是JavaScript和CSS同时合并时，较短的URL末尾多了一个符号，比如YUI3中使用Minify时：

http://yui.yahooapis.com/combo?3 . 1 . 1/build/widget/assets/skins/Sam/widget . CSS 3 . 1 . 1/build/console/assets/skins/Sam/console . CSS http://dancewithnet.com/min/b=yuif=3 . 1 . 1/tab view/assets/skins/Sam/tab view . CSS

两个都可以。虽然在早期的IE浏览器版本(如IE6)中存在未解决的风险，在某些特定情况下会影响缓存，但当使用修改后的YUI时，合并后的URL会显示为/min/b=yuif=3 . 1 . 1/tab view/assets/skins/Sam/tab view . CSS。这是YUI的组合处理程序的一个小错误，因此YUI3将此错误设置为P5。但是当我们为了更好的支持Minify而改造YUI3的时候，还是需要解决这个问题。请看修改后的YUI3中使用Minify的例子。

3)在CDN上使用Minify

CDN的全称是内容传递网。其最常见的应用是通过位于不同地理位置的服务器将静态资源部署到用户最近的边缘，可以有效解决Web服务中大量静态资源的速度和性能问题。因为实施成本比较高，在实际应用中，大公司一般会自己建立CDN，小公司只能从第三方租用CDN。但是，这两种方法不会影响服务器端合并和压缩程序的实现。一般情况下，静态资源不会直接上传到CDN，而是先传输到后台服务器，然后各地CDN的前端Cache服务器可以根据需要获取。YUI CDN的组合处理器部署在其后台服务器上，Minify也应该如此。简单的图表如下：

当一个资源被请求到CDN时，CDN首先会检查该资源在本地是否存在，如果存在则直接返回该资源，如果不存在则请求其后台服务器，后台服务器根据资源URL的信息进行处理，然后返回给CDN，由CDN存储该资源。当资源请求再次发生时，没有必要请求后台服务器。所以虽然合并需要时间，特别是压缩JavaScript和CSS文件，但是基本上是安全的，因为只需要次，次基本上是自己访问的(我们可以创建一个程序自动访问一次，其实图片优化也可以采用这种方法)。

注意：

[1]重写

#上的if module mod _ rewrite . cruriteenengine您可能需要在某些服务器上重写库#重写库/min#重写URL，如'/min/f=. '到'/min/？f=.'重写器^([bfg]=.*)index.php？$1 [L，NE]/IfModule

[2]配置

$ min _ enableBuilder=true//可以由http://dwn/min/builder/配置为本地使用，设置为false/$ min _ cache path=' c ://windows//temp '为外部使用；//$ min _ cachePath='/tmp '；//$ min _ cachepath=preg_replace('/^//d；/'，''，session _ save _ path())；//选择一个，去掉注释，设置临时缓存目录，可以减少程序操作，提高性能$ min _ serveooptions[' maxage ']=1800；//设置浏览器缓存时间。为了提高性能，建议将此时间设置得尽可能长，例如315360000。//如果需要在不改变URL的情况下更新静态文件，可以使用类似时间戳的方法。//比如http://localhost/min/f=example/example . CSS 20100601 . CSS//建议静态文件按版本号管理，每次修改都要升级版本号，这样就不需要时间戳了。//比如http://localhost/min/f=example/example _ 1 _ 0 _ 1 . CSS $ min//parameter f获取参数个数，即合并文件个数，可以完全增加，比如50。//当然你可能会遇到URL更大值的问题，后面会解释

[3]

$ min _ serveooptions[' minifiers '][' application/x-JavaScript ']=' '；$ min _ serveooptions[' minifiers '][' text/CSS ']=' '；