关于JavaScript的gzip静态压缩方法
2007-01-05 00:00
711 查看
一个页面减少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中的配置
在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
传统的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的gzip静态压缩方法
- 关于JavaScript的gzip静态压缩方法
- JavaScript的gzip静态压缩方法记录
- IE6 调用gzip压缩后JavaScript不执行的解决方法
- 在Apache服务器上启用GZip压缩静态内容的方法
- 关于几种语言(c#,php,python,javascript)字符串的gzip压缩与解压的整理
- 关于javascript中的静态属性和静态方法
- linux PHP空间设置GZIP压缩网页方法!
- 关于javascript中apply()和call()方法的区别
- Tomcat7中开启gzip压缩功能的配置方法
- Nodejs关于gzip/deflate压缩详解
- tomcat开启gzip网页压缩的方法
- 关于字体等静态文件跨域的解决方法 关键字 Access-Control-Allow-origin
- 用JAVASCRIPT实现静态对象、静态方法和静态属性
- php读取远程gzip压缩网页的方法
- php使用gzip压缩传输js和css文件的方法
- 你想不到的压缩方法:将javascript文件压缩成PNG图像存储
- javascript中静态方法、实例方法、内部方法和原型的一点见解
- 关于javascript定义并初始化对象的几种方法
- 使用静态工厂方法创建连接池(关于代理和包装的使用)