开发学院网页设计 JavaScript 关于JavaScript的gzip静态压缩方法阅读

关于JavaScript的gzip静态压缩方法

　2010-09-14 13:29:35　来源：WEB开发网　　　

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

传统的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  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="badqiu@gmail.com"/> 9 <script> 10　　  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压缩