關于JavaScript的gzip靜態壓縮方法

2019-11-21 02:22:54

字體：大中小

來源：轉載

供稿：網友

一個頁面減少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.org

tomcat的壓縮配置示例下載地址: http://www.blogjava.net/Files/badqiu/gziptest.rar

上一篇：JavaScript的目的分析

下一篇：關于Javascript 的 prototype問題。