关于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 相关文章推荐
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
js实现产品缩略图效果
Mar 10 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
p5.js实现简单货车运动动画
Oct 23 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
在smarty中调用php内置函数的方法
2013/02/07 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
两款万能的php分页类
2015/11/12 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
SVG实现时钟效果
2018/07/17 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
haskell实现多线程服务器实例代码
2013/11/26 Python
Python Queue模块详解
2014/11/30 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
python 实现A*算法的示例代码
2018/08/13 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
部门年终奖分配方案
2014/05/07 职场文书
中国世界遗产导游词
2015/02/13 职场文书
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python