[thelist] Compression mechanism for Javascript (was: Re: [thelist] Re:Error in regular expression on IE for Mac)

[Liorean]

At 10:02 2002-02-06 +0100, Allan Lund Jensen wrote:
>Hi,
>
>Thanks for all the helpful suggestions.
>In the end Liorean produced a solution that worked. So thanks a lot for
>that.
>Regular expressions aren't really my best subject ;)
>
>IMHO it's slightly strange that there should be differences between Mac and
>Windows in this case ... but what do I know.
>
>Sam: The expression was actually for a small game (as you've all probably
>noticed, the5k is on again this year;)). However, we will be doing some
>compression at some point, though that will probably be a bit less
>sophisticated. A member of the "project" actually tried to implement the
>LZH-algoritm in Javascript, however the compressed code turned out to be
>200% larger than the original :D
>I guess it's back to the drawing board with that idea....
>
>Allan

I have a nice compression method for JavaScripts originating from Brent
Ashley <http://brentashley.manilasites.com/>. I changed it from string to
RegExp, otherwise it's the same.

It seldom makes files above somewhere around 400 bytes bigger.

First, make all your code take one long row. Insert semicolons at statement
ends except where other characters provide ends. Use "return(code)" syntax
instead of "return code", and make all other statements that have several
syntaxes be consistent in what syntax they use. Use "if(){code}" even when
you would be able to use "if()code;", for example. (Yes, it's longer. No,
it'll make compression more effective in the end.)

Then you go through it and replace common code with ~n where n is an
integer specifying the number of the replacement (starting with 0 and then
counting up). Decompression will be applied in reverse order, so a
replacement with lower number might be contained in one with higher. (as
can be seen in my example)


S=""; // Here you put your compressed script
for(I=n;I>=0;) // Instead of n use the number of replaced strings
S=S.replace(eval('/~'+I+'/g'),(str.split('|'))[I--]); // replace str with a
string of replaced text. Separate with | character. (Or any character you
specify.)
eval(S) // Execute code




Example using my own code (replacing | with § as separator, since I use |
in the code):

Original:
~~~~@~~~~
function E() { // gE(<TYPE>) [Element]
   var arg=arguments;
   return document.createElement(arg[0])
}
function gE() { // gE(<ID>) [getElement]
   var arg=arguments;
   return document.getElementById(arg[0])
}
function gEs() { // gEs(<TYPE>) [getElements]
   var arg=arguments;
   return document.getElementsByTagName(arg[0])
}
function rE() { // rE(<ID>) [removeElement]
   var arg=arguments, elm;
   elm=gE(arg[0])||arg[0];
   elm.parentNode.removeChild(elm)
}
function cE() { // cE(<ID>) [clearElement]
   var arg=arguments, elm;
   elm=gE(arg[0])||arg[0];
   while (typeof elm.childNodes[0]!='undefined') {
     rE(elm.childNodes[0])
   }
}
~~~~@~~~~
Total length: 654 bytes


Compact but not compressed:
~~~~@~~~~
E=function(){var arg=arguments;return(document.createElement(arg[0]))};
gE=function(){var arg=arguments;return(document.getElementById(arg[0]))};
gEs=function(){var
arg=arguments;return(document.getElementsByTagName(arg[0]))};
rE=function(){var
arg=arguments,elm;elm=gE(arg[0])||arg[0];elm.parentNode.removeChild(elm)};
cE=function(){var arg=arguments,elm;elm=gE(arg[0])||arg[0];while(typeof
elm.childNodes[0]!='undefined')rE(elm.childNodes[0])}
~~~~@~~~~
Total length: 449 bytes


Compressed:
~~~~@~~~~
S="E~2create~5(~1))};gE~6Id(~1))};gEs~6TagName(~1))};rE~3elm.parentNode.removeChild(elm)};cE~3while(typeof
~4!='undefined')rE(~4)}";for(I=6;I>=0;)S=S.replace(eval('/~'+I+'/g'),("=function(){var
arg=arguments§arg[0]§~0;return(document.§~0,elm;elm=gE(~1)||~1;§elm.childNodes[0]§Element§~2get~5By".split('§'))[I--]);eval(S)
~~~~@~~~~
Total length: 320 bytes



Note that the longer the script is and the more use of similar syntax there
is in the script, the more effective the compression mechanism will be.
Also, it requires some manual job to compress, but for 5k it should work fine.

// Liorean