关于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 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
在网页里看flash的trace数据的js类
Jan 10 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
详解JavaScript中的链式调用
Nov 27 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
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
Python几种常见算法汇总
2020/06/02 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
国外软件测试工程师面试题
2016/12/09 面试题
一道Delphi面试题
2016/10/28 面试题
大学生个人求职信范文
2013/09/21 职场文书
公立医院改革实施方案
2014/03/14 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
语文教师求职信范文
2015/03/20 职场文书
入学证明
2015/06/23 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书