关于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的代码显示区域自动拉长效果
Dec 07 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
用JS写一个发布订阅模式
Nov 07 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利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
PHP扩展开发入门教程
2015/02/26 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
python3中property使用方法详解
2019/04/23 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
银行实习的自我鉴定
2013/12/10 职场文书
工作说明书范文
2014/05/07 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
pytorch中的model.eval()和BN层的使用
2021/05/22 Python