关于JavaScript的gzip静态压缩方法

关于JavaScript的gzip静态压缩方法

传统的JS压缩(删除注释,删除多余空格等)提供的压缩率有时还是不尽不意,幸亏现在的浏览器都支持压缩传输(通过设置http header的Content-Encoding=gzip),可以通过服务器的配置(如apache)为你的js提供压缩传输,或是appfuse中使用的GZipFilter使tomcat也提供这种能力

现在的问题是这种动态的压缩会导致CPU占用率过高,现在我想到的解决辨法是通过提供静态压缩(就是将js预先通过gzip.exe压缩好)

一.下面描述在tomcat中的应用

1.将prototype.js通过gzip.exe压缩保存成prototype.gzjs
2.设置header,我编写了一个简单的AddHeadersFilter来将所有以gzjs结尾的文件增加设置header Content-Encoding=gzip

 1     web.xml中的配置
 2       < filter >
 3           < filter-name > AddHeaderFilter </ filter-name >
 4           < filter-class >
 5              badqiu.web.filter.AddHeaderFilter
 6           </ filter-class >
 7           < init-param >
 8               < param-name > headers </ param-name >
 9               < param-value > Content-Encoding=gzip </ param-value >
10           </ init-param >
11       </ filter >
12 
13       < filter-mapping >
14           < filter-name > AddHeaderFilter </ filter-name >
15           < url-pattern > *.gzjs </ url-pattern >
16       </ filter-mapping >

测试prototype是否正常的代码

 1  < html >
 2  < head >
 3  <!--  type="text/javascript"不可少,有些浏览器缺少这个不能运行,具体已经忘记了  -->
 4  < script  src ="prototype.gzjs"  type ="text/javascript" ></ script >
 5  </ head >
 6  < body >
 7       < input  id ="username"  name ="username"  value ="badqiu" />< br  />
 8       < input  id ="email"  value ="[email protected]" />
 9  < script >
10       <!--  测试prototype的方法是否正常 -->
11      alert($F('username'))
12  </ script >
13  </ body >
14  </ html >

在Apache httpd中可以直接通过在httpd.conf增加AddEncoding x-gzip .gzjs来映射.gzjs文件的header

二.相关压缩率数据
1. prototype.js 1.5.0_rc0原始大小56KB,未经任何处理直接使用gzip压缩为12KB,总压缩率79%
2. 通过js压缩工具压缩过的protytype.js为20KB,使用gzip压缩为10KB,总压缩率为83%
3. 实际项目中的多个js合并成的文件 439KB,直接通过gzip压缩为85KB,总压缩率81%
4. 439KB经过js压缩为165KB,再经过gzip压缩为65KB,总压缩率86%
基本上你都可以忽略js压缩工具的压缩率,直接使用gzip压缩

gzip下载地址 http://www.gzip.org
tomcat的压缩配置示例下载地址: http://www.blogjava.net/Files/badqiu/gziptest.rar