【整理收藏】合并、压缩JS、CSS文件减少页面HTTP请求数的方法
Web性能优化最佳实践中最重要的一条是减少HTTP请求,它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射(Image Map)和使用Data URI来编码图片。CSS Sprites和图像映射现在已经随处可见了,但由于IE6和IE7不支持Data URI以及性能问题,这项技术尚未大量使用。目前大部分网页中的JavaScript和CSS文件数量和开发时一致,少量的网页会根据实际情况采取本地合并,这些合并中相当多的是有选择地手动完成,每次新的合并都需要重新在本地完成并上传到服务器,比较的随意和繁琐,同样文件的压缩也有类似的情况。而利用服务端的合并和压缩,我们就可以按照开发的逻辑尽可能让文件的颗粒度变小,利用网页中URL的规则来自动实现文件的合并和压缩,这会相当的灵活和高效。
bo Handler
一,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>
二,nginx_concat_module
nginx_concat_module 是淘宝研发的针对 nginx 的文件合并模块,主要用于合并前端代码减少 http 请求数。如果你的应用环境中部署了 nginx,那么可以考虑尝试此模块减少请求数。
三,Combres
是一个 ASP.NET 网站的客户端资源js,css的压缩,合成和缓存库,基于Apache 2.0协议开源,最新版本是2.0。这个库同时支持WebForm和MVC,主要的特性如下:
- 资源文件的组织,包括javascript和css文件的组织,每个都可以使用相同的配置或者使用不同的配置。
- 可以在资源里完成精简,压缩,然后发送给浏览器,所有的这些资源只使用一个Http请求
- 有一个可扩展的minification架构,开发人员可以选择关闭资源压缩的设置或选择其中一个内置的适配器,类库里带了3个适配器.NET YUI Compressor library, Microsoft Ajax Minifier library和Google Closure compiler service,配置都是通过XML文件进行,非常方便。
- 对每个请求生成适当的ETag和Expires/Cache-Control 头,支持服务器端的缓存。
- 和ASP.NET 路由引擎集成,所以对ASP.NET MVC 和ASP.NET WebForm的支持非常好。
- 支持调试模式,调试的时候不缓存也不压缩,方便调试。
关于Combres库的详细介绍可以看codeproject上的文章: Combres 2.0 - A Library for ASP.NET Website Optimization
四,借助HttpCombiner让你的网站加速
原文地址:http://www.codeproject.com/KB/aspnet/HttpCombine.aspx
中文翻译:http://www.cnblogs.com/aNd1coder/archive/2011/01/12/Speed-up-your-website-by-using-httpCombiner.html
通过搜索还发现几个的处理方法,国外的,先记录下,有空了研究测试下
参考文章:Combine, minify and compress JavaScript files to load ASP.NET pages faster
项目地址:http://www.codeproject.com/KB/aspnet/combineMinify.aspx
Combining, Compressing, Minifying ASP.NET ScriptResource and HTML Markups
项目地址:http://www.codeproject.com/KB/aspnet/AspNetOptimizer.aspx
CssJscriptOptimizer
项目地址:http://www.codeproject.com/KB/aspnet/CssAndJavaScriptOptimizer.aspx
CombineAndMinify (刚才又发现了这个,看评价很不错,做个标记)
http://www.codeproject.com/KB/aspnet/CombineAndMinify.aspx
还有个 MbCompression
http://mbcompression.codeplex.com/