Client-side data compression with JavaScript

When retrieving data from the server through HTTP, you can generally rely on your web server to compress the information using gzip or deflate. You can even do the trick yourself on your backend code. However, sending large amounts of data from the browser -to- the server, is another story.

If you need to maximize throughput for large datasets, one possible solution is to compress your JSON or XML (or whatever) using JavaScript,  then send the compressed data with the usual AJAX method and finally decompress it in the server.

jSEND is a jQuery plugin that compresses any string using a Lempel–Ziv–Welch algorithm in the browser. A PHP class is included with the package, it is used in the backend to decompress the data.

I’ve written a .NET version which is  an almost-literal translation of that decompression algorithm. You can find it on my github.  It was successfully tested on the .Net framework 3.5, 4.0, and it also works on Mono.

Compressing and decompressing data is processor-hungry, beware that for certain small-sized chunks of data, as well as for data with a high level of entropy, it can be actually slower than sending the original uncompressed string.

 

 

 

Use the demo and paste some of your real data to see the effect. Note that LZW is very good at compressing repetitive text. Serialized data, specially collections, tend to contain repeated key names, repeated values, etc.

There are many other LZW, LZMA, LZJB or even Huffman compression implementations. jSEND just works out of the box.


 Content under Attribution-Share Alike 3.0 Unported

About Iván Stepaniuk

I have been writing software for more than fifteen years, in a wide variety of languages and platforms ranging from Assembler to JavaScript and from 8bit micro-controllers to large web applications. See my about page and Google+
This entry was posted in JavaScript and tagged , , , . Bookmark the permalink.

3 Responses to Client-side data compression with JavaScript

  1. The jsend.org domain seems to be down for a while. Note that the JavaScript part of this library is now added to my github repo under /jsend.

  2. Hi Iván -

    We are using jsend in our app. There seems to be an error when we try to compress Asian characters (eg: 唐). We get garbage when the PHP decompresses on the server.

    Are you aware if jsend can handle all Unicode characters?

    Thanks very much for your help.

    Pierre

  3. Hey Pierre,
    I’m sure the library can handle Chinese characters correctly. Just tried ‘唐’ to be sure, with jSend 2.0.0. PHP class. I also tried with long articles from the Chinese Wikipedia, no problem.

    About handling ‘all’ Unicode characters; When translating the PHP class to .NET, I discovered that there are four Unicode 3.2 blocks that can’t pass a round trip (compress in the browser, compare to the uncompressed backend result).

    The 4 offending blocks are:
    - Private Use Area
    - Supplementary Private Use Area-A
    - Supplementary Private Use Area-B
    - Arabic Presentation Forms-A

    It probably fails because of the underlying Unicode implementations differ between the browser and the server. I’m not sure.

    You can find a sample of every Unicode block here: http://www.ltg.ed.ac.uk/~richard/unicode-sample-3-2.html

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">