gzip壓縮JavaScript

      爲了提高客戶端的體驗效果，RIA開發逐漸興起。這樣會項目中會充斥的大量的JavaScript代碼，與此同時會消耗客戶端瀏覽器性能。對於 Ext 實現的 one page one application ，對於外網訪問也就產生了噩夢似的加載（除非你的網速足夠快）。爲了緩解（不是解決，從代碼加載方面考慮）加載慢的問題可以對JavaScript進行壓縮。

 

 

JavaScript的gzip靜態壓縮方法

 

一、將js格式文件壓縮成gzjs格式。使用gzip.exe打包壓縮後的JS文件，最後生成xx.js.gz，把xx.js.gz文件改成xx.gzjs。壓縮實例： ext-all.js （610KB）, gzip.exe壓縮後爲ext-all.gzjs（168KB）。
附：gzip使用方法，在命令行下輸入： gzip -9 ext-all.js ext-all.js.gz
修改ext-all.js.gz的後綴名ext-all.gzjs（注：也可以通過gzip -h命令查看幫助）
下載地址：http://www.gzip.org

 

 

二、在項目web.xml中加入過濾器。
代碼如下：

<filter> <filter-name>GzipJsFilter</filter-name> <filter-class>net.kangsoft.util.GzipJsFilter</filter-class> <init-param> <param-name>headers</param-name> <param-value>Content-Encoding=gzip</param-value> </init-param> </filter> <filter-mapping> <filter-name>GzipJsFilter</filter-name> <url-pattern>*.gzjs</url-pattern> </filter-mapping>

 

三、加入過濾類

package net.kangsoft.util; import java.io.IOException; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; import java.util.Set; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class GzipJsFilter implements Filter { Map headers = new HashMap(); public void destroy() { } public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { if (req instanceof HttpServletRequest) doFilter((HttpServletRequest)req, (HttpServletResponse)res, chain); else chain.doFilter(req, res); } public void doFilter(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws IOException, ServletException { request.setCharacterEncoding("UTF-8"); for (Iterator it = this.headers.entrySet().iterator(); it.hasNext(); ) { Map.Entry entry = (Map.Entry)it.next(); response.addHeader((String)entry.getKey(), (String)entry.getValue()); } chain.doFilter(request, response); } public void init(FilterConfig config) throws ServletException { String headersStr = config.getInitParameter("headers"); String[] headers = headersStr.split(","); for (int i = 0; i < headers.length; ++i) { String[] temp = headers[i].split("="); this.headers.put(temp[0].trim(), temp[1].trim()); } } }

 

四、在需導入js的頁面head裏面添加導入文件，如：<script type="text/javascript"

src="js/ext3/ext-all.gzjs"></script> 

 

 配置Apache,Tomcat的gzip壓縮功能

 

       HTTP 壓縮可以大大提高瀏覽網站的速度，它的原理是，在客戶端請求網頁後，從服務器端將網頁文件壓縮，再下載到客戶端，由客戶端的瀏覽器負責解 壓縮並瀏覽。相對於普通的瀏覽過程HTML ,CSS,Javascript , Text ，它可以節省40%左右的流量。更爲重要的是，它可以對動態生成的，包括CGI、PHP , JSP , ASP , Servlet,SHTML等輸出的網頁也能進行壓縮，壓縮效率驚人

對於Tomcat5.0以後的版本是支持對輸出內容進行壓縮的。使用的是gzip壓縮格式

對於Tomcat5.0以後的版本是支持對輸出內容進行壓縮的.　使用的是gzip壓縮格式
下面是tomcat5.5.20 中的$tomcat_home$/conf/server.xml的原內容
< Connector port ="80" maxHttpHeaderSize ="8192" maxThreads ="150" minSpareThreads ="25" maxSpareThreads ="75" enableLookups ="false" redirectPort ="8443" acceptCount ="100" connectionTimeout ="20000" disableUploadTimeout ="true" URIEncoding ="utf-8" /> <!-- Note : To disable connection timeouts, set connectionTimeout value to 0 --> <!-- Note : To use gzip compression you could set the following properties : compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/html,text/xml" -->

 從上面的第8行內容可以看出，要使用gzip壓縮功能，你可以在Connector實例中加上如下 屬性即可
1) compression="on" 打開壓縮功能
2) compressionMinSize="2048" 啓用壓縮的輸出內容大小，這裏面默認爲2KB
3) noCompressionUserAgents="gozilla, traviata" 對於以下的瀏覽器，不啓用壓縮 
4) compressableMimeType="text/html,text/xml"　壓縮類型

我這裏的配置內容爲：

<Connector port="80" maxHttpHeaderSize="8192" maxThreads="150" minSpareThreads="25" maxSpareThreads="75" enableLookups="false" redirectPort="8443" acceptCount="100" connectionTimeout="20000" disableUploadTimeout="true" URIEncoding="utf-8" compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" /> <!-- Note : To disable connection timeouts, set connectionTimeout value to 0 --> <!-- Note : To use gzip compression you could set the following properties : compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/html,text/xml" -->

 

tomcat 開啓Gzip ：

1.找到Tomcat 目錄下的conf下的server.xml，並找到如下信息

Connector port="8080" maxHttpHeaderSize="8192" maxThreads="150" minSpareThreads="25" maxSpareThreads="75" enableLookups="false" redirectPort="8443" acceptCount="100" connectionTimeout="20000" disableUploadTimeout="true"

 將它改成如下的形式（其實在上面代碼的下面已經有了，將他們打開而已。）

<!-- Define a non-SSL HTTP/1.1 Connector on port 8080 --> <Connector port="8080" maxHttpHeaderSize="8192" maxThreads="150" minSpareThreads="25" maxSpareThreads="75" enableLookups="false" redirectPort="8443" acceptCount="100" connectionTimeout="20000" disableUploadTimeout="true" compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/html,text/xml" >

這樣，就能夠對html和xml進行壓縮了，如果要壓縮css 和 js，那麼需要

 

<Connector port="8080" ......... compressableMimeType="text/html,text/xml,text/css,text/javascript" >

 甚至可以壓縮圖片：

<Connector port="8080" ......... compressableMimeType="text/html,text/xml,text/css,text/javascript,image/gif,image/jpg" >

 

一旦啓用了這個壓縮功能後，我們怎麼來測試壓縮是否有效呢？首先Tomcat是根據瀏覽器請求頭中的accept-encoding來判斷瀏覽器是否支持壓縮功能，如果這個值包含有gzip，就表明瀏覽器支持gzip壓縮內容的瀏覽，所以我們可以用httpclient來寫一個這樣的簡單測試程序.

 

import org.apache.commons.httpclient.HttpClient; import org.apache.commons.httpclient.methods.GetMethod; public class HttpTester { public static void main(String[] args) throws Exception{ HttpClient http = new HttpClient(); GetMethod get = new GetMethod("http://www.dlog.cn/js/prototype.js"); try{ get.addRequestHeader("accept-encoding", "gzip,deflate"); get.addRequestHeader("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; Alexa Toolbar; Maxthon 2.0)"); int er = http.executeMethod(get); if(er==200){ System.out.println(get.getResponseContentLength()); String html = get.getResponseBodyAsString(); System.out.println(html); System.out.println(html.getBytes().length); } }finally{ get.releaseConnection(); } } }

 

執行這個測試程序，看看它所輸出的是什麼內容，如果輸出的是一些亂碼，以及打印內容的長度遠小於實際的長度，那麼恭喜你，你的配置生效了，你會發現你網站的瀏覽速度比以前快多了。

對於Apache而言，有兩種情況
１）針對Apache2.0之前的版本，它原本是不支持 的，不過可以通過添加第三方的module_gzip模塊來啓用
２）針對Apache2.0及之後的版本，Apache提供支持, 不過不叫gzip，而叫mod_deflate
下面就對Apache2.0及之後的版本作一個說明
1) 去掉#LoadModule headers_module modules/mod_headers.so前面的註釋#,
2) 添加LoadModule deflate_module modules/mod_deflate.so
3) 在VirtualHost中添加

<Location "/"> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary Header append Vary User-Agent env=!dont-vary </Location>

 我這裏面有一個完整的演示

# 加載deflate模塊 LoadModule headers_module modules/mod_headers.so LoadModule deflate_module modules/mod_deflate.so <VirtualHost *:80> DocumentRoot f:/apacheTest <Location "/"> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary Header append Vary User-Agent env=!dont-vary </Location> </VirtualHost>