繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 关于JavaScript的gzip静态压缩方法
- Javascript
- js支持158、159开头的手机号的验证
- javascript学习网址备忘
- JScript的条件编译
- [原创]站长必须要知道的javascript广告代码
- js实现的点击超链显示隐藏层
- JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
- JavaScript 不只是脚本
- 把JS与CSS写在同一个文件里的书写方法
- Javascript & DHTML 实例编程（教程）基础知识
- Javascript & DHTML 实例编程（教程）DOM基础和基本API
- javascript实现的一个图片转移效果
- 用js实现键盘方向键翻页功能的代码
- js实现DIV的一些简单控制
- 用CSS+JS实现的进度条效果效果
- 爱恋千雪-US-AscII加密解密工具（网页加密）下载
- 用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口
- 非常不错的页面特效 建议大家看下
- javascript Zifa FormValid 0.1表单验证 代码打包下载
- 实现javascript的延期执行或者重复执行的两个函数
- 推荐一个不错的图片浏览效果
Javascript 中的 关于JavaScript的gzip静态压缩方法
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 153 ::
收藏到网摘: n/a
一个页面减少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是否正常的代码 <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>
复制代码 代码如下:
<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="[email protected]"/>
<script>
<!-- 测试prototype的方法是否正常-->
alert($F('username'))
</script>
</body>
</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="[email protected]"/>
<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
评论 (0) All
