注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

我的博客

等闲识得东风面,万紫千红总是春!

 
 
 

日志

 
 

关于JavaScript的gzip静态压缩方法   

2009-11-27 11:16:51|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

传统的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中的配置

Java代码 关于JavaScript的gzip静态压缩方法  - 才人 - 我的博客

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

<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.js是否正常的代码

Java代码 关于JavaScript的gzip静态压缩方法  - 才人 - 我的博客

  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="badqiu@gmail.com"/>   
  9. <script>   
  10.     <!-- 测试prototype的方法是否正常-->   
  11.     alert($F('username'))   
  12. </script>   
  13. </body>   
  14. </html>  

<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

  评论这张
 
阅读(736)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017