Fetching zipped text file and unzipping in client browsers, feasible in Javascript?

Question

I am developing a web page containing Javascript. This js uses static string data (about 1-2 MB) which is stored in a flat file. I could compress it with gzip or any other algorithm to reduce the transfer load.

Would it be possible to fetch this binary file with Ajax and decompress it into a string (which I could split later) in the client browser. If yes, how can I achieve this? Does anyone have a code example?

Answer 1

And another library or site is this one, although it has few examples it has some thorough test cases that can be seen.

https://github.com/imaya/zlib.js

Here are some of the complex test cases https://github.com/imaya/zlib.js/blob/master/test/browser-test.js https://github.com/imaya/zlib.js/blob/master/test/browser-plain-test.js

The code example seems very compact. Just these two lines of code...

// compressed = Array.<number> or Uint8Array
var gunzip = new Zlib.Gunzip(compressed);
var plain = gunzip.decompress();

If you look here https://github.com/imaya/zlib.js/blob/master/bin/gunzip.min.js you see they have the packed js file you will need to include. You might need to include one or two of the others in https://github.com/imaya/zlib.js/blob/master/bin.

In any event get those files into your page and then feed the GUnzip objects your pre-gzipped data from the server and then it will be as expected.

You will need to download the data and get it into an array yourself using other functions. I do not think they include that support.

So try these examples of download from https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data

function load_binary_resource(url) {
  var req = new XMLHttpRequest();
  req.open('GET', url, false);
  req.overrideMimeType('text\/plain; charset=x-user-defined');
  req.send(null);
  if (req.status != 200) return '';
  return req.responseText;
}

// Each byte is now encoded in a 2 byte string character. Just AND it with 0xFF to get the actual byte and then feed that to GUnzip...
var filestream = load_binary_resource(url);
var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)

===================================== Also there is Node.js

Question is similar to Simplest way to download and unzip files in Node.js cross-platform?

There is this example code at nodejs documentation. I do not know how much more specific it gets than that... http://nodejs.org/api/zlib.html

Answer 2

Just enable the Gzip compression on your Apache and everything will be automatically done.

Probably you will have to store the string in a .js file as a json and enable gzip for js mime type.

Answer 3

I remember that I used js-deflate for off-linne JS app with large databases (needed due to limitations of local storage) and worked perfectly. It depends on js-base64.