<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Karmagination &#187; gzip</title>
	<atom:link href="http://www.karmagination.com/blog/tag/gzip/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.karmagination.com/blog</link>
	<description>Creation begins with imagination</description>
	<lastBuildDate>Fri, 25 Sep 2009 03:44:44 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Work with gzip, not against it</title>
		<link>http://www.karmagination.com/blog/2009/09/01/work-with-gzip-not-against-it/</link>
		<comments>http://www.karmagination.com/blog/2009/09/01/work-with-gzip-not-against-it/#comments</comments>
		<pubDate>Wed, 02 Sep 2009 00:05:44 +0000</pubDate>
		<dc:creator>Kean</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[gzip]]></category>

		<guid isPermaLink="false">http://www.karmagination.com/blog/?p=86</guid>
		<description><![CDATA[Below is the gzip algorithm in plain text, taken from http://www.gzip.org/. Why do we need to study it? Read below for the answer. The deflation algorithm used by gzip (also zip and zlib) is a variation of LZ77 (Lempel-Ziv 1977, see reference below). It finds duplicated strings in the input data. The second occurrence of [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.karmagination.com%2Fblog%2F2009%2F09%2F01%2Fwork-with-gzip-not-against-it%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.karmagination.com%2Fblog%2F2009%2F09%2F01%2Fwork-with-gzip-not-against-it%2F&amp;source=karmagination&amp;style=normal&amp;service=bit.ly&amp;service_api=R_5ed1fb4fa93b5df6c239dff2a25003de" height="61" width="50" /><br />
			</a>
		</div>
<p>Below is the gzip algorithm in plain text, taken from http://www.gzip.org/. Why do we need to study it? Read below for the answer.</p>
<pre>The deflation algorithm used by gzip (also zip and zlib) is a variation of
LZ77 (Lempel-Ziv 1977, see reference below). It finds duplicated strings in
the input data.  The second occurrence of a string is replaced by a
pointer to the previous string, in the form of a pair (distance,
length).  Distances are limited to 32K bytes, and lengths are limited
to 258 bytes. When a string does not occur anywhere in the previous
32K bytes, it is emitted as a sequence of literal bytes.  (In this
description, `string' must be taken as an arbitrary sequence of bytes,
and is not restricted to printable characters.)

Literals or match lengths are compressed with one Huffman tree, and
match distances are compressed with another tree. The trees are stored
in a compact form at the start of each block. The blocks can have any
size (except that the compressed data for one block must fit in
available memory). A block is terminated when deflate() determines that
it would be useful to start another block with fresh trees. (This is
somewhat similar to the behavior of LZW-based _compress_.)

Duplicated strings are found using a hash table. All input strings of
length 3 are inserted in the hash table. A hash index is computed for
the next 3 bytes. If the hash chain for this index is not empty, all
strings in the chain are compared with the current input string, and
the longest match is selected.

The hash chains are searched starting with the most recent strings, to
favor small distances and thus take advantage of the Huffman encoding.
The hash chains are singly linked. There are no deletions from the
hash chains, the algorithm simply discards matches that are too old.

To avoid a worst-case situation, very long hash chains are arbitrarily
truncated at a certain length, determined by a runtime option (level
parameter of deflateInit). So deflate() does not always find the longest
possible match but generally finds a match which is long enough.

deflate() also defers the selection of matches with a lazy evaluation
mechanism. After a match of length N has been found, deflate() searches for
a longer match at the next input byte. If a longer match is found, the
previous match is truncated to a length of one (thus producing a single
literal byte) and the process of lazy evaluation begins again. Otherwise,
the original match is kept, and the next match search is attempted only N
steps later.

The lazy match evaluation is also subject to a runtime parameter. If
the current match is long enough, deflate() reduces the search for a longer
match, thus speeding up the whole process. If compression ratio is more
important than speed, deflate() attempts a complete second search even if
the first match is already long enough.

The lazy match evaluation is not performed for the fastest compression
modes (level parameter 1 to 3). For these fast modes, new strings
are inserted in the hash table only when no match was found, or
when the match is not too long. This degrades the compression ratio
but saves time since there are both fewer insertions and fewer searches.
</pre>
<p>&nbsp;</p>
<p>In our quest for the best possible JavaScript file size, we have always tried to optimize our code for minification. BUT, better minification does not equate to better gzip compression. Here&#8217;s what you need to avoid to get a better gzip compression, do not munge strings.</p>
<p>Recently there have been some libraries trying this strategy: using array notation instead of the dot notation for members of Objects. Here is a perfect illustration.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// uncompressed</span>
<span style="color: #003366; font-weight: bold;">var</span> getElementById <span style="color: #339933;">=</span> <span style="color: #3366CC;">'getElementById'</span><span style="color: #339933;">;</span>
document<span style="color: #009900;">&#91;</span>getElementById<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">color</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'blue'</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// minified</span>
<span style="color: #003366; font-weight: bold;">var</span> a<span style="color: #339933;">=</span><span style="color: #3366CC;">'getElementById'</span><span style="color: #339933;">;</span>document<span style="color: #009900;">&#91;</span>a<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">color</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'blue'</span><span style="color: #339933;">;</span></pre></div></div>

<p>And you have read gzip&#8217;s algorithm, right? What does it do? Well, it maintains a lookup table for strings (note: everything is treated as strings in gzip&#8217;s point of view). By munging strings, you are actually emulating gzip in some ways. Here&#8217;s what the code above just did, added &#8216;a&#8217; to the gzip lookup table, instead of just having getElementById there.</p>
<p>I have created a very simple case of string munging. Here&#8217;s the proof.</p>
<p>In the uncompressed file I have the following iterated till line 1000.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #3366CC;">'u1'</span>
<span style="color: #3366CC;">'u2'</span>
<span style="color: #3366CC;">'u3'</span>
<span style="color: #3366CC;">'u4'</span>
<span style="color: #3366CC;">'u5'</span>
<span style="color: #3366CC;">'u6'</span>
<span style="color: #3366CC;">'u7'</span>
<span style="color: #3366CC;">'u8'</span>
<span style="color: #3366CC;">'u9'</span>
<span style="color: #3366CC;">'u10'</span></pre></div></div>

<p>&nbsp;<br />
In the munged file, I have the following iterated till line 1001</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> <span style="color: #3366CC;">'u1'</span><span style="color: #339933;">,</span> b <span style="color: #339933;">=</span> <span style="color: #3366CC;">'u2'</span><span style="color: #339933;">,</span> c <span style="color: #339933;">=</span> <span style="color: #3366CC;">'u3'</span><span style="color: #339933;">,</span> d <span style="color: #339933;">=</span> <span style="color: #3366CC;">'u4'</span><span style="color: #339933;">,</span> e <span style="color: #339933;">=</span> <span style="color: #3366CC;">'u5'</span><span style="color: #339933;">,</span> f <span style="color: #339933;">=</span> <span style="color: #3366CC;">'u6'</span><span style="color: #339933;">,</span> g <span style="color: #339933;">=</span> <span style="color: #3366CC;">'u7'</span><span style="color: #339933;">,</span> h <span style="color: #339933;">=</span> <span style="color: #3366CC;">'u8'</span><span style="color: #339933;">,</span> i <span style="color: #339933;">=</span> <span style="color: #3366CC;">'u9'</span><span style="color: #339933;">,</span> j <span style="color: #339933;">=</span> <span style="color: #3366CC;">'u10'</span>
a
b
c
d
e
f
g
h
i
j</pre></div></div>

<p>&nbsp;<br />
The results are, taken from <a href="http://www.karmagination.com/downloads/gzip_munging/">here</a> : </p>
<ul>
<li>uncompressed &#8211; 5,099 bytes</li>
<li>munged &#8211; 2,103 bytes</li>
<li>uncompressed gzipped &#8211; 93 bytes</li>
<li>munged gzipped &#8211; 120 bytes</li>
</ul>
<p>My experiments conclude the following, <strong>string munging is perfectly fine if you are munging less than 3 different unique strings and it yields better result minification-wise</strong>. Otherwise, leave the strings as is, and save yourself some bytes (gzipped). <strong>Suprised</strong>? <img src='http://www.karmagination.com/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.karmagination.com/blog/2009/09/01/work-with-gzip-not-against-it/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>
