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

 

     web.xml中的配置
     <filter>
         <filter-name>AddHeaderFilter</filter-name>
         <filter-class>
              badqiu.web.filter.AddHeaderFilter
         </filter-class>
         <init-param>
             <param-name>headers</param-name>
             <param-value>Content-Encoding=gzip</param-value>
         </init-param>
     </filter>
 
     <filter-mapping>
         <filter-name>AddHeaderFilter</filter-name>
         <url-pattern>*.gzjs</url-pattern>
     </filter-mapping>

 

测试prototype是否正常的代码

 

 <html>
 <head>
 <!-- type="text/javascript"不可少,有些浏览器缺少这个不能运行,具体已经忘记了 -->
 <script src="prototype.gzjs" type="text/javascript"></script>
 </head>
 <body>
     <input id="username" name="username" value="badqiu"/><br />
     <input id="email" value="badqiu@gmail.com"/>
 <script>
     <!-- 测试prototype的方法是否正常-->
      alert($F('username'))
 </script>
 </body>
 </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

以上为转载下附gizp使用例子

格式:gizp.exe -9 filename

例如:d:\gizp.exe -9 d:\ajax.js

 

 

本文来自: http://hi.baidu.com/sorc/blog/item/996d02b3d056bca3d9335ad7.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值