JavaScript implementation of Gzip

Question

I'm writing a Web application that needs to store JSON data in a small, fixed-size server-side cache via AJAX (think: Opensocial quotas). I do not have control over the server.

I need to reduce the size of the stored data to stay within a server-side quota, and was hoping to be able to gzip the stringified JSON in the browser before sending it up to the server.

However, I cannot find much in the way of JavaScript implementations of Gzip. Any suggestions for how I can compress the data on the client side before sending it up?

Answer 1

Most browsers can decompress gzip on the fly. That might be a better option than a javascript implementation.

Answer 2

I guess a generic client-side JavaScript compression implementation would be a very expensive operation in terms of processing time as opposed to transfer time of a few more HTTP packets with uncompressed payload.

Have you done any testing that would give you an idea how much time there is to save? I mean, bandwidth savings can't be what you're after, or can it?

Answer 3

You can use a 1 pixel per 1 pixel Java applet embedded in the page and use that for compression.

It's not JavaScript and the clients will need a Java runtime but it will do what you need.

Answer 4

I don't know of any gzip implementations, but the jsolait library has functions for LZW compression/decompression. The code is covered under the LGPL.

// LZW-compress a string
function lzw_encode(s) {
    var dict = {};
    var data = (s + "").split("");
    var out = [];
    var currChar;
    var phrase = data[0];
    var code = 256;
    for (var i=1; i<data.length; i++) {
        currChar=data[i];
        if (dict[phrase + currChar] != null) {
            phrase += currChar;
        }
        else {
            out.push(phrase.length > 1 ? dict[phrase] : phrase.charCodeAt(0));
            dict[phrase + currChar] = code;
            code++;
            phrase=currChar;
        }
    }
    out.push(phrase.length > 1 ? dict[phrase] : phrase.charCodeAt(0));
    for (var i=0; i<out.length; i++) {
        out[i] = String.fromCharCode(out[i]);
    }
    return out.join("");
}

// Decompress an LZW-encoded string
function lzw_decode(s) {
    var dict = {};
    var data = (s + "").split("");
    var currChar = data[0];
    var oldPhrase = currChar;
    var out = [currChar];
    var code = 256;
    var phrase;
    for (var i=1; i<data.length; i++) {
        var currCode = data[i].charCodeAt(0);
        if (currCode < 256) {
            phrase = data[i];
        }
        else {
           phrase = dict[currCode] ? dict[currCode] : (oldPhrase + currChar);
        }
        out.push(phrase);
        currChar = phrase.charAt(0);
        dict[code] = oldPhrase + currChar;
        code++;
        oldPhrase = phrase;
    }
    return out.join("");
}

Answer 5

I can't help you with GZipping on the "fly". But if you want to GZip your WebResource JS then Kariem's blog about GZipping in nAnt might help you...

Answer 6

Here are some other compression algorithms implemented in Javascript:

• Huffman
• LZ77

Answer 7

Hello Guys,

The lzw functions are very nice and fast. i want to implement this in a auto js compression script in php (with cache) but there is one problem: chr seems to act differently when comparing to fromCharCode in javascript, they give not the same results when charcode is above 256. So what can i do about this? Her is my translation of lzw_encode():

function lzw_encode($s) 
{
    $dict = array();
    $data = "".str_replace( "\r", "", $s );
    //print_r( $data ); die;
    $out = array();
    $currChar = 0;
    $phrase = $data{0};
    $code = 256;
    $c = strlen($data);
    for ($i=1; $i<$c; $i++){
        $currChar=$data{$i};
        if($dict[$phrase.$currChar] != null) {
            $phrase.=$currChar;
        }
        else {
            $out[]=(strlen($phrase) > 1 ? $dict[$phrase] : ord($phrase{0}));
            //print( "'".((strlen($phrase) > 1) ? $dict[$phrase] : ord($phrase{0}))."'\n"); 
            $dict[$phrase.$currChar] = $code;
            $code++;
            $phrase=$currChar;
        }
    }

    $out[]=(strlen($phrase) > 1)? $dict[$phrase] : ord($phrase{0});
    $c = count($out);

    for($i=0; $i<$c; $i++) {
         $out[$i] = chr($out[$i]); // <-- here it is
    } 

    return implode("",$out);
}

Thank you very much for your reply. Greetz, Erwinus

Answer 8

I did not test, but there's a javascript implementation of ZIP:

http://jszip.stuartk.co.uk/

Answer 9

A JavaScript GZIP implementation: http://code.google.com/p/gzipjs/

Answer 10

I ported an implementation of LZMA from a GWT module into standalone JavaScript. It's called LZMA-JS.