Home > Developer > JavaScript

Gzip Static Compression in JavaScript

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Merge compression is an effective and feasible method, but it requires Apache support (Apache and IIS share a port solution ).
The compression ratio provided by traditional JS compression (delete comments, delete extra spaces, etc.) is sometimes not satisfactory, fortunately, all browsers support compression transmission (by setting Content-Encoding = gzip of http header), and you can provide compression transmission for your js through server configurations (such as apache, or the GZipFilter used in appfuse enables tomcat to provide this capability.
Compressed bytes)

1. The application in tomcat is described below

1.save prototype.jsthrough gzip.execompression to prototype.gz js 2. Set the header. I wrote a simple AddHeadersFilter to add the header Content-Encoding = gzip web. xml configuration for all files ending with gzjs.Copy codeThe Code is as follows: <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>

Test whether prototype. js code is normal.

Copy codeThe Code is as follows: <Head>
<! -- Type = "text/javascript" is indispensable. Some browsers cannot run if this is missing. The details are forgotten. -->
<Script src = "prototype.gz js" type = "text/javascript"> </script>
</Head>
<Body>
<Input id = "username" name = "username" value = "badqiu"/> <br/>
<Input id = "email" value = "badqiu@gmail.com"/>
<Script>
<! -- Test whether the prototype method is normal -->
Alert ($ F ('username '))
</Script>
</Body>
</Html>

In Apache, you can add the AddEncoding x-gzip .gzjsin httpd. conf to reflect the header of the .gz js file.

Ii. compression rate

Prototype. js 1.5.0 _ rc0 original size 56 Kb, directly compressed to 12 KB using gzip without any processing, the total compression rate is 79%
2. The protytype. js compressed by the js compression tool is 20 KB, gzip compressed to 10 KB, and the total compression rate is 83%.
3. The files merged by multiple js files in the actual project are 439KB, compressed to 85KB directly through gzip, and the total compression rate is 81%.

4. 439KB compressed by js to 165KB, and then compressed by gzip to 65KB, with a total compression rate of 86%

Basically, you can ignore the compression ratio of the js compression tool and directly use gzip for compression.
Gzip http://www.gzip.org

Tomcat compression configuration example: http://www.blogjava.net/Files/badqiu/gziptest.rar

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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