2006-12-04

关于JavaScript的gzip静态压缩方法

传统的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中可以直接通过在httpd.conf增加AddEncoding x-gzip .gzjs来映射.gzjs文件的header

二.相关压缩率数据
1. 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
评论
叶子 2006-12-05
比live和google map好多了

记得之前这两个的js...压缩后的还有500多k的..

特别是google map,3个js,每个接近200k
badqiu 2006-12-05
fins 写道
哦 那可能是我理解错了你的初衷
我们没有使用过 服务器端缓存压缩结果的方式
我们核心思想还是在客户端缓存
因为最终目的是为了减少对js文件的请求时间和请求次数
在js没有变化的情况下 没有比在客户端缓存更好的方法了


呵,我这里主要解决的是首次js加载的问题(因为我经过的项目中一个页面所有的js总和有439KB),
而你提供的是服务器的通用的性能优化
fins 2006-12-05
哦 那可能是我理解错了你的初衷
我们没有使用过 服务器端缓存压缩结果的方式
我们核心思想还是在客户端缓存
因为最终目的是为了减少对js文件的请求时间和请求次数
在js没有变化的情况下 没有比在客户端缓存更好的方法了
badqiu 2006-12-05
fins 写道
这个工作不是我做的 我还真不知道怎么配的

我们本机开发环境就是普通的 tomcat
tomcat下开启动态压缩是 

   compression="on" 
   compressionMinSize="2048" 
   noCompressionUserAgents="gozilla, traviata" 
   compressableMimeType="text/html,text/xml,text/javascript"


给文件加失效我们用的是应用服务器里设置的（我不知道怎么设置 我们服务器用的websphere） tomcat如果不结合apache好像不支持

自己做也可以 做过滤
然后对所有 *.js的请求 加header

response.setDateHeader("Expires", (System.currentTimeMillis() + 一很长很长的long型));


你这个设置Expires并不是在服务器端缓存js压缩后的内容,而是控制客户端浏览器的缓存使用,而我查看apache的文档没有看到mod_deflate与mod_cache结合的样例,

上面静态压缩要解决的就是动态压缩导致服务器CPU占用率太高的问题,并不是客户端的文件过期设置
daoger 2006-12-05
http://ajax.org/space/start
2006-12-04 Monday
fins 2006-12-05
这个工作不是我做的 我还真不知道怎么配的

我们本机开发环境就是普通的 tomcat
tomcat下开启动态压缩是 

   compression="on" 
   compressionMinSize="2048" 
   noCompressionUserAgents="gozilla, traviata" 
   compressableMimeType="text/html,text/xml,text/javascript"


给文件加失效我们用的是应用服务器里设置的（我不知道怎么设置 我们服务器用的websphere） tomcat如果不结合apache好像不支持

自己做也可以 做过滤
然后对所有 *.js的请求 加header

response.setDateHeader("Expires", (System.currentTimeMillis() + 一很长很长的long型));
badqiu 2006-12-05
fins 写道
我们的做法是
利用服务器自带的动态压缩功能 传输时压缩数据流
然后设置一个失效期

这样只有第一次的时候慢 以后就不慢了

因为我们的系统js一旦写好 不会轻易变动 所以这种方法一直沿用至今


不知可否共享一下你的服务器配置,这种静态压缩入侵性太强
fins 2006-12-05
我们的做法是
利用服务器自带的动态压缩功能 传输时压缩数据流
然后设置一个失效期

这样只有第一次的时候慢 以后就不慢了

因为我们的系统js一旦写好 不会轻易变动 所以这种方法一直沿用至今
badqiu 2006-12-05
叶子 写道
这样的如果客户端不支持gzip会出问题的吧

个人觉得还是交给apache自动做好了.HOHO..


我测试过的在IE5上是没有问题的,再低版本没有试过(希望有人可以列出gzip的浏览器支持情况),其它firefox等也都是支持的,如果你的客户端不支持gzip,我觉得你可能也没有支持他的必要了,因为现在的大部分js框架都需要IE5及其以上版本

并且你可以根据客户端浏览器提交的Http Header判断浏览器是否支持gzip传输
叶子 2006-12-05
这样的如果客户端不支持gzip会出问题的吧

个人觉得还是交给apache自动做好了.HOHO..
together 2006-12-05
还是很有用的。尤其对于用户访问量非常大的网站，以免因网络速度过慢而造成页面无法完全加载。
oznyang 2006-12-05
客户端脚本都是缓存起来的，除了第一次慢点，以后基本可以忽略不计
badqiu
搜索本博客
最近加入圈子
存档
最新评论