本文介绍如何通过静态gzip压缩技术优化JavaScript文件加载。相比动态压缩，预先压缩的.gzjs文件可显著降低服务器CPU占用。文章提供了在Tomcat和Apache中的具体配置方法，包括Filter设置与Header映射，并展示了不同场景下的压缩率数据，证明静态gzip压缩的高效性。
静态gzip压缩概述与优势
对于小型网站，单个页面减少10KB的体积影响有限，但对于大型站点而言，这些累积的流量节省至关重要。gzip压缩是一种高效且可行的解决方案，不过它通常需要Apache服务器的支持（若Apache与IIS共用端口，需额外处理）。
传统的JavaScript压缩方式（如删除注释和多余空格）有时压缩效果并不理想。幸运的是，现代浏览器普遍支持通过设置HTTP Header中的Content-Encoding=gzip来进行压缩传输。可以通过服务器配置（例如Apache）为JavaScript文件提供压缩传输，或者利用Appfuse中使用的GZipFilter让Tomcat也具备这种能力。
然而，动态压缩会导致服务器CPU占用率过高。为解决这一问题，可以考虑采用静态压缩方案，即预先使用gzip.exe将JavaScript文件压缩好。
Tomcat环境下的配置方法
一、在Tomcat中的应用
1. 使用gzip.exe将prototype.js压缩并保存为prototype.gzjs文件。2. 设置HTTP Header，我编写了一个简单的AddHeadersFilter，用于为所有以.gzjs结尾的文件增加Content-Encoding=gzip的Header。以下是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服务器配置说明
在Apache中，可以直接通过在httpd.conf文件中增加AddEncoding x-gzip .gzjs来映射.gzjs文件的Header。
不同场景下的压缩率对比
二、压缩率分析
1. prototype.js 1.5.0_rc0原始大小为56KB，未经任何处理直接使用gzip压缩后为12KB，总压缩率为79%。
2. 通过JavaScript压缩工具处理过的prototype.js为20KB，再使用gzip压缩后为10KB，总压缩率为83%。
3. 实际项目中多个JavaScript文件合并后的文件为439KB，直接通过gzip压缩后为85KB，总压缩率为81%。
4. 439KB经过JavaScript压缩工具处理为165KB，再经过gzip压缩后为65KB，总压缩率为86%。
基本上，你可以忽略JavaScript压缩工具的压缩效果，直接使用gzip压缩即可。
gzip下载地址：http://www.gzip.org
Tomcat的压缩配置示例下载地址：http://www.blogjava.net/Files/badqiu/gziptest.rar