关于JavaScript的gzip静态压缩方法


Posted in Javascript onJanuary 05, 2007

一个页面减少10KB对于一个小网站来说,算不上什么,但对于大型站点来说,累计起来却是一个很大的流量......gzip压缩是一个有效可行的方法,但需要Apache的支持(Apache与IIS共用一个端口解决方法)。

传统的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.js是否正常的代码
<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.conf增加AddEncoding x-gzip .gzjs来映射.gzjs文件的header

二.压缩率 

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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
一些常用的JS功能函数代码
Jun 23 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
关于Javascript 的 prototype问题。
Jan 03 #Javascript
彻底搞懂JS无缝滚动代码
Jan 03 #Javascript
经典的解除许多网站无法复制文字的绝招
Dec 31 #Javascript
对象的类型:本地对象(1)
Dec 29 #Javascript
JavaScript高级程序设计
Dec 29 #Javascript
JavaScript 参考教程
Dec 29 #Javascript
js自带函数备忘 数组
Dec 29 #Javascript
You might like
PHP新手上路(十三)
2006/10/09 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
php文件系统处理方法小结
2016/05/23 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
jQuery的deferred对象使用详解
2011/08/20 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
numpy.linspace 生成等差数组的方法
2018/07/02 Python
详解python中递归函数
2019/04/16 Python
python微信撤回监测代码
2019/04/29 Python
python版百度语音识别功能
2019/07/09 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
新课培训心得体会
2014/09/03 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
2016年春节慰问信息
2015/03/25 职场文书
寒假生活随笔
2015/08/15 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书