作家
登录

关于JavaScript的gzip静态压缩方法

作者: 来源:www.28hudong.com 2013-03-30 03:50:49 阅读 我要评论

一个页面减少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.orgtomcat的压缩配置示例下载地址: http://www.blogjava.net/Files/badqiu/gziptest.rar

  推荐阅读

  googlemap 之 javascript实现方法

这是一个很典型的一个background-position-x的应用。技术含量并不高,但是思想还是值得思考的,证明了DHTML方面有很多东西可以变通的。用背景用map,如果做得更复杂一些,用ajax动态的载入图片的背景,也是一个小型>>>详细阅读


本文标题:关于JavaScript的gzip静态压缩方法

地址:http://www.17bianji.com/kaifa2/JS/31153.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)