传统的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. iOS子线程操作检测版本更新，有新版本通知用户更新, CheckVersion

    iOS子线程操作检测版本更新,有新版本通知用户更新 CheckVersion 一:如何使用: #import "CheckVersion.h" //输入你的app在appStore ...

  2. 算法笔记_151:算法提高 01背包(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 给定N个物品,每个物品有一个重量W和一个价值V.你有一个能装M重量的背包.问怎么装使得所装价值最大.每个物品只有一个. 输入格式 输入的第 ...

  3. profiler跟踪事件模板文件

    查找执行情况最差的查询. 例如,可以创建一个捕获与 TSQL 和 Stored Procedure 事件类(RPC:Completed 和SQL:BatchCompleted)相关的事件的跟踪.在此跟 ...

  4. [转]K近邻算法

    什么是K近邻算法 何谓K近邻算法,即K-Nearest Neighbor algorithm,简称KNN算法,单从名字来猜想,可以简单粗暴的认为是:K个最近的邻居,当K=1时,算法便成了最近邻算法,即 ...

  5. UNIX环境编程初步认识——编程环境搭建

     前言 前期学习了Linux的一些基本知识后,在借助前期的学习的基础上想再初步认识一下操作系统的一些环境编程体系相关知识,当中环境的配置和搭建费了非常大的劲,须要一点点摸索和尝试,下边是环境搭建的 ...

  6. 从缓存行出发理解volatile变量、伪共享False sharing、disruptor

    volatilekeyword 当变量被某个线程A改动值之后.其他线程比方B若读取此变量的话,立马能够看到原来线程A改动后的值 注:普通变量与volatile变量的差别是volatile的特殊规则保证 ...

  7. Linux平台Boost的编译方法

    本博客(http://blog.csdn.net/livelylittlefish)贴出作 者(三二一@小鱼)相关研究.学习内容所做的笔记,欢迎广大朋友指正! Linux平台Boost的编译方法 Bo ...

  8. 【RESTful风格】软件接口设计中RESTful风格

    REST = Representational State Transfer 表述性状态转移,是一种软甲接口设计风格.总之就是一种风格 REST基于:HTTP.HTML.JSON.XML.URI 这些 ...

  9. Linux命令-目录处理命令:cd

    cd /tmp/shijiazhuang 切换到tmp目录下面的shijiazhuang目录 cd .. 切换到上一级目录

  10. ERROR org.apache.zookeeper.ClientCnxn:532 - Error while calling watcher

    一.背景 使用zookeeper操作时提示这个错误信息 ERROR org.apache.zookeeper.ClientCnxn: - Error while calling watcher jav ...