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

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

  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>

在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

JavaScript的gzip静态压缩方法记录的更多相关文章

  1. 在OpenResty中使用淘宝的concat进行css和js合并，同时支持GZIP静态压缩

    =======================================================================================cd /usr/local ...

  2. linux服务器的Gzip文件压缩方法[转]

    一.gzip介绍 gzip是GNU zip的缩写,它是一个GNU自由软件的文件压缩程序,也经常用来表示gzip这种文件格式.软件的作者是Jean-loup Gailly和Mark Adler.1992 ...

  3. IIS 7 启用 gzip 静态压缩 压缩js和css文件

    搞了很久,不如nginx好弄,不知道怎么修改压缩比,也不知道怎么压缩的规则是啥(管理器上没有写),不过反正出来了,一个js文件900多K变成了100多K 1.在web.config文件里面加上: &l ...

  4. spring gzip 静态压缩优化

    HTTP 压缩可以大大提高浏览网站的速度,它的原理是,在客户端请求网页后,从服务器端将网页文件压缩,再下载到客户端,由客户端的浏览器负责解压缩并浏览.相对 于普通的浏览过程HTML ,CSS,Java ...

  5. apache启用gzip压缩方法--转载自http://www.cnblogs.com/linzhenjie/archive/2013/03/05/2943635.html

    一.gzip介绍 Gzip是一种流行的文件压缩算法,现在的应用十分广泛,尤其是在Linux平台.当应用Gzip压缩到一个纯文本文件时,效果是非常明显的,大约可以减少70%以上的文件大小.这取决于文件中 ...

  6. php简单开启gzip压缩方法(zlib.output_compression)

    网上的教程基本是你抄我来我抄他,不外乎加头加尾或者自构函数两种写法.实际上每个php页面都要去加代码——当然也可以include引用,不过总显得略微麻烦   一般而言,页面文件开启gzip压缩以后,其 ...

  7. 【09】Nginx：静态压缩 / 日志切割 / 防盗链 /恶意解析/ 跨域

    写在前面的话 上一节我们谈了关于 nginx 服务器的一些简单的安全优化问题,能够帮助我们解决一部分线上服务存在的安全隐患.但是想要提升用户体验这是原因不够的,我们还需要从服务的优化方面入手. 本节更 ...

  8. 完整的yuicompressor单个压缩和批量压缩以及gzip再次压缩，拦截器的配置等

    下载地址:http://yuilibrary.com/download/yuicompressor/ 个人认为现在yuicompressor是最安全,最值得信赖的压缩工具,至少到现在没出现过问题 1. ...

  9. Nginx 动态压缩与静态压缩，显著提高前后端分离项目响应速度！

    文章转载自:https://mp.weixin.qq.com/s/NuTmEUQU5L69is53bCauKA Nginx 中配置前端的 gzip 压缩,有两种思路: Nginx 动态压缩,静态文件还 ...

随机推荐

  1. linux性能监控命令

    vmstat 可以用来监控虚拟内存.可对操作系统的虚拟内存.IO.CPU等多个指标的整体情况进行监视. Linux系统的内存分为物理内存和虚拟内存两种.物理内存是真实的,也就是物理内存条上的内存.而虚 ...

  2. ARC和非ARC在项目中转换

    f your project doesn't use ARC: you must add the -fobjc-arc compiler flag to SVHTTPRequest.m andSVHT ...

  3. react 中使用 lodash 中的 _.throttle

    1.场景: 首次调用执行一次,一定时间内再次调用,不再执行. 2.实现 debounce (函数去抖) 多次触发,只在最后一次触发时,执行目标函数. _.debounce(func, [wait=0] ...

  4. Asp.net MVC中Html.Partial, RenderPartial, Action,RenderAction 区别和用法【转发】

    Html.partial和RenderPartial的用法与区别Html.partial和RenderPartial都是输出html片段,区别在于Partial是将视图内容直接生成一个字符串并返回(相 ...

  5. Java静态变量的初始化（static块的本质）

    Java静态变量的初始化(static块的本质) 标签: javaclassstring编译器jdk工作 2010-02-06 07:23 33336人阅读 评论(16) 收藏 举报  分类: Jav ...

  6. zookeeper 入门讲解实例 转

    转  http://www.blogjava.net/BucketLi/archive/2010/12/21/341268.html zookeeper使用和原理探究(一) zookeeper介绍zo ...

  7. 解决tomcat启动慢

    1.在Tomcat环境中解决 可以通过配置JRE使用非阻塞的Entropy Source. 在catalina.sh中加入这么一行:-Djava.security.egd=file:/dev/./ur ...

  8. SQL truncate/delete/drop 区别

    相同点 1. truncate 和不带 where 子句的 delete 以及 drop 都会删除表内的数据. 2. drop/truncate 都是 DDL 语句(数据定义语言),执行后会自动提交. ...

  9. pycharm 控制台字体背景颜色设定让你美到爆

    还在为你控制台字体颜色不入眼而发愁吗? 在某些特殊时刻想要改变下字体的颜色却无从下手而发愁吗? 那你就进来看一看,瞧一瞧,之需看2分钟,花2分钟理解,花3分钟练练手就能让你的控制能字体炫酷起来! 一. ...

  10. 稳固而窒息 jquery attr 和 Prop的区别

    通常在获取或者设置checked,selected,readonly,disabled等的时候使用prop效果更好 attr是通过setAtrribute和getAttribute来设置的,使用的是D ...