首页 > 网站 > WEB开发 > 正文

JavaScript的gzip静态压缩方法记录

2024-04-27 14:21:46
字体:
来源:转载
供稿:网友

javaScript的gzip静态压缩方法记录

传统的JS压缩(删除注释,删除多余空格等)提供的压缩率有时还是不尽不意,幸亏现在的浏览器都支持压缩传输(通过设置http header的Content-Encoding=gzip),可以通过服务器的配置(如apache)为你的js提供压缩传输,或是appfuse中使用的GZipFilter使tomcat也提供这种能力现在的问题是这种动态的压缩会导致服务器CPU占用率过高,现在我想到的解决辨法是通过提供静态压缩(就是将js预先通过gzip.exe压缩好)一.下面描述在tomcat中的应用1.将PRototype.js通过gzip.exe压缩保存成prototype.gzjs2.设置header,我编写了一个简单的AddHeadersFilter来将所有以gzjs结尾的文件增加设置header Content-Encoding=gzipweb.xml中的配置

Java代码收藏代码
  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. <filter-mapping>
  12. <filter-name>AddHeaderFilter</filter-name>
  13. <url-pattern>*.gzjs</url-pattern>
  14. </filter-mapping>

测试prototype.js是否正常的代码

Java代码收藏代码
  1. <html>
  2. <head>
  3. <!--type="text/Javascript"不可少,有些浏览器缺少这个不能运行,具体已经忘记了-->
  4. <scriptsrc="prototype.gzjs"type="text/javascript"></script>
  5. </head>
  6. <body>
  7. <inputid="username"name="username"value="badqiu"/><br/>
  8. <inputid="email"value="badqiu@Gmail.com"/>
  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.orgtomcat的压缩配置示例下载地址:http://www.blogjava.net/Files/badqiu/gziptest.rar


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表