JSXCompressor – zlib compressed JavaScript code

The open source library JSXGraph (http://jsxgraph.org) contains utilities to read files which
have been compressed by the ZLIB (http://zlib.org) library. That means, JSXGraph has a pure
JavaScript implementation of deflate, unzip and base64_decode. This can be used for delivering compressed JavaScript inside of an HTML file. Of course, with todays browsers it depends on the transmission bandwidth if this is worthwile. If the web server does not support compression of data, then this tool may be an option.

One possibility to compress the JavaScript source on server side is to use PHP. The code below writes the content of a JavaScript file as a compressed, base64 encoded string on-the-fly into the HTML. Then on client side this string can be accessed via the JavaScript variable jsxcompressed.

<?php
function jxgcompress($filename) 
{   
    if (file_exists($filename)) {
        $base64 = base64_encode(gzcompress(rawurlencode(file_get_contents($filename)),9));
        echo "var jxgcompressed = \"$base64\";\n";
    } else {
        throw new Exception("$filename not found");
    }
}
?>

<script type="text/javascript">
<?php 
    jxgcompress("./helloworld.js");
?>   
</script>

To uncompress and run this code on client side, the following code has to be included in the HTML code:

<script src="./jsxcompressor.js" type="text/javascript"></script>
<script type="text/javascript">
eval(JXG.decompress(jxgcompressed));
</script>

Thats all! The compression rate should be fairly good, since the compression algorithm is essentially gzip. There is some additional overhead since the compressed output has additionally to be base64 encoded.

Of course, this effort is useless, if the web server delivers the content already compressed with gzip.

The zip file jsxcompressor.zip contains two examples: testhelloworld.php and testjsxgraph.php. The jsxcompressor code is open source and can be downloaded here. The source code of the minified JavaScript file jsxcompressor.js consists of the file Util.js from the JSXGraph project, prepended by the string

JXG = {};
JXG.decompress = function(str) {
    return unescape( 
                (new JXG.Util.Unzip(JXG.Util.Base64.decodeAsArray(str))).unzip()[0][0]
             );
};

The source code of the JSXGraph library can be downloaded from http://sourceforge.net/projects/jsxgraph/.
JSXCompressor is released under the LGPL.

Enjoy,
Alfred Wassermann

This entry was posted in JSXCompressor and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

13 Comments

  1. Posted October 5, 2009 at 11:29 am | Permalink

    Another method to transfer compressed files without using mod_gzip or mod_deflate in apache is described in http://blog.avirtualhome.com/2009/09/29/using-gzip-encoding-in-apache-without-mod_gzip-or-mod_deflate/

  2. Posted October 22, 2009 at 1:16 pm | Permalink

    Today, Yahoo released its own client side compression library: http://browserplus.yahoo.com/demos/squeezr/intro

  3. Posted November 6, 2009 at 4:44 am | Permalink

    I have often read about this interesting format! I have long wanted to use it instead of raster graphics. In my opinion an excellent option for the site.

    It often for the design of the site do not necessarily use the full-color pictures, which is not bad and weigh. But this option could create a completely different design elements, and weigh much less, Another undeniable plus is that for them, and CSS can create. As a result, you can modify the elements themselves, and not to change the picture.

    So I would like to know more detail about it. How long is now feasible. Which browsers already supported as a simple files and animation. Just read that Maykrosoftovskom browser with the problem. A fox and Opera is normal work, and about Safari Googley browser does not hear.

    Thank you!
    ———————————————————————
    arcade flash shockwave java fun.

  4. Posted December 16, 2010 at 3:14 am | Permalink

    Valuable info. Lucky me I found your site by accident, I bookmarked it.

  5. Derija
    Posted April 17, 2012 at 11:53 am | Permalink

    This is exactly what I needed for my current AJAX Joomla! 2.5.x plugin. It works fantastically! Thank you for this very useful piece of code.

  6. bhaumik
    Posted September 30, 2013 at 8:27 am | Permalink

    I have used jsxcompressor.js but this is not working in ipad/iphone
    help me if you know about this

  7. Posted October 11, 2013 at 11:24 am | Permalink

    @bhaumik:

    Have you used JSXCompressor before and updated to the most recent version? What is the exact error message?

  8. David
    Posted November 20, 2013 at 8:51 pm | Permalink

    Hello

    Very great job. I like it

    I use since one year on Ipad IOS 5 and 6.1 the jsxcompressor, it’s run very well
    But with the IOS 7.1 the decompression have no message erreur but the data
    it not decompressed correctly. Some information is not correct.

    I use the decompressed data for execute sql request and I have syntaxe erreur.
    On PC with Chrome it’s also run very well.

    With my Mac Book Pro in remote debugging Safari the Same Web Page run very well.
    When I disconnect the remote debugger and try again. The erreur occur again.

    I don’t know what to do ? Do you have an idea ?
    Thank you!

    • Posted December 10, 2013 at 3:55 pm | Permalink

      Thank you very much for your bug report. After a very long search we could – hopefully – track down the problem. In iOS 7, safari seems to produce wrong results after a while if the code contains shift operators (>>) and is compiled by the JIT compiler. Now, we wrapped an empty try statement around these lines of code, which prevents compilation by JIT (hopefully). Therefore, unzipping is a little bit slower now, but correct in our test cases.

      The fixed version is ready for download, please tell us if this patch solved your problem.
      Thanks for pointing this out,
      Alfred

      • Steve Caldwell
        Posted February 15, 2014 at 8:38 pm | Permalink

        Thank you so much for posting about this fix. We were banging heads trying to track down a bug in our workflow, and to complicate matters this issue doesn’t seem to occur on the 5s, only 5c, 5, and 4s in iOS7. It is a silent error until you really dig in and compare the results. Adding fuel to the fire, the bug does not persist when the device is connected to remote developer tools in Safari, and I’m still not sure why that is the case.

        • Posted February 18, 2014 at 11:36 am | Permalink

          Indeed. This is the weirdest bug I’ve ever seen.

  9. Posted February 1, 2014 at 2:47 pm | Permalink

    Hi Alfred.
    Thanks very much for your work on JSXCompressor, it’s a great utility.
    I’m having a problem with decompressing the € character. I’m encoding a utf8 file in base64 and GZip’ing it in node. When I decompress it with JSXCompressor, it is mangling the character. I tried to activate the _utf8_decode function from the decode function called (in an earlier version of JSXCompressor), but this is leading to an undefined array error higher up.
    I am having the same problem with the latest version of the code also.
    Otherwise I am able to use the € character in my web page.
    I can remove the character from the source files, I am compressing, but if you were aware of solution which does not require this approach, I would appreciate it.
    Regards,
    Jan

    • Posted February 18, 2014 at 11:35 am | Permalink

      You additionally have to utf8-decode the output of the unzipping:

      JXG.Util.UTF8.decode(JXG.decompress(dataCSVCompressed))

      Best wishes,
      Alfred

6 Trackbacks

  1. By JSXGraph Wordpress Plugin Update at webCONSUL on September 30, 2009 at 9:11 am

    [...] müsst ihr euch unbedingt noch das Release von JSXCompressor anschauen um komprimierten JavaScript-Code zu erzeugen und auszuliefern. Gerade bei Webservern die [...]

  2. [...] [...]

  3. [...] decompression routine must be small, existing (efficient but large) decompression libraries such as JXGraph and js-deflate are disqualified (the decompression routine from the latter, which seems quite [...]

  4. By JavaScript lzw_encode « rg443blog on December 29, 2012 at 12:51 pm

    [...] // 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 = oldPhrase + currChar; code++; oldPhrase = phrase; } return out.join(""); } jsolait library JSXCompressor [...]

  5. By zlib compressed JavaScript code « rg443blog on January 10, 2013 at 10:15 pm

    [...] JSXCompressor – zlib compressed JavaScript code. http://sourceforge.net/projects/jsxgraph/   [...]

  6. [...] is where I found the library: http://jsxgraph.uni-bayreuth.de/wp/2009/09/29/jsxcompressor-zlib-compressed-javascript-code/ There is even a standalone utility that can do that, JSXCompressor, and the code is LGPL [...]

Post a Comment

Your email is never published nor shared. 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>

 
  • Archives