关于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事件串连执行多个处理过程的方法
Mar 09 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
Promise静态四兄弟实现示例详解
Jul 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中exec与system用法区别分析
2014/09/22 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
单链表反转python实现代码示例
2018/02/08 Python
Python装饰器知识点补充
2018/05/28 Python
对numpy中shape的深入理解
2018/06/15 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
python实现日志按天分割
2019/07/22 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
出国留学计划书
2014/04/27 职场文书
敬老模范事迹
2014/05/21 职场文书
生活部的活动方案
2014/08/19 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
努力工作保证书
2015/02/28 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
民事辩护词范文
2015/05/21 职场文书