關於JavaScript的gzip靜態壓縮方法

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

<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>

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More