关于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 相关文章推荐
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
Vue.js中的组件系统
May 30 Javascript
React中使用Vditor自定义图片详解
Dec 25 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递归实现无限分类 格式化数组的详解
2013/06/08 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
laravel学习教程之存取器
2016/07/30 PHP
Yii核心验证器api详解
2016/11/23 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
js实现导航跟随效果
2018/11/17 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
通过js实现压缩图片上传功能
2020/02/25 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
python 实现矩阵填充0的例子
2019/11/29 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
项目专员岗位职责
2013/12/04 职场文书
部队领导证婚词
2014/01/12 职场文书
门面房租房协议书
2014/08/20 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
上班迟到检讨书
2015/05/06 职场文书
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS