FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


A search to make JS file even smaller-2306byte to 542





Mgccl
A search to make JS file even smaller
We know JS files will be send though the internet, that means, it take bandwidth.
And from what I know, there are 3 ways to make JS file even smaller
1.take out the comments, spaces and uneccery codes
2.recode the program in other ways(like var d=document, then you get less space)
3.use use javascript "zip" itself and "unzip" afterward

Here, I got a sample
2306 bytes javascript with about half is comment

Code:
/*collapse expand single item
by Leo Charre & Jesse Fergusson
Internet Connection  2004 2005
www.internetconnection.net


Usage:

place this in your HEAD tags:

   <script language="JavaScript" src="/WHEREINPATH/collapse_expand_single_item.js"></script>

Place this in your HTML

   <img src="/IMAGESDIR/u.gif" name="imgfirst" width="9" height="9" border="0" >
   <a  href="#first" onClick="shoh('first');" >Customer Support</a>

   <div style="display: none;" id="first" >
         
         With its friendly solutions-oriented
         approach, our timely and knowledgeable Technical Support Staff are
         completely at your disposal. Our Support Technicians are highly
         trained on the inner workings of the Internet and its associated
         technologies. Combined with effective troubleshooting techniques,
         we can quickly identify and resolve technical issues whether they
         are on our end or on the client end.            
   
   </div>


WHEREINPATH is where you are storing this script on your account
IMAGESDIR is where on your acoount you are storing the icons for (expanded collapsed)

*/

imgout=new Image(9,9);
imgin=new Image(9,9);

/////////////////BEGIN USER EDITABLE///////////////////////////////
   imgout.src="/gfx/u.gif";
   imgin.src="/gfx/d.gif";
///////////////END USER EDITABLE///////////////////////////////////

//this switches expand collapse icons
function filter(imagename,objectsrc){
   if (document.images){
      document.images[imagename].src=eval(objectsrc+".src");
   }
}

//show OR hide funtion depends on if element is shown or hidden
function shoh(id) {
   
   if (document.getElementById) { // DOM3 = IE5, NS6
      if (document.getElementById(id).style.display == "none"){
         document.getElementById(id).style.display = 'block';
         filter(("img"+id),'imgin');         
      } else {
         filter(("img"+id),'imgout');
         document.getElementById(id).style.display = 'none';         
      }   
   } else {
      if (document.layers) {   
         if (document.id.display == "none"){
            document.id.display = 'block';
            filter(("img"+id),'imgin');
         } else {
            filter(("img"+id),'imgout');   
            document.id.display = 'none';
         }
      } else {
         if (document.all.id.style.visibility == "none"){
            document.all.id.style.display = 'block';
         } else {
            filter(("img"+id),'imgout');
            document.all.id.style.display = 'none';
         }
      }
   }
}

1.first, use the 1st way, I used JS packer from JC Meyrignac and chose none as the way of packing(that result take out the comment and spaces). RESULT: 796 bytes

Code:
imgout=new Image(9,9);imgin=new Image(9,9);imgout.src="/gfx/u.gif";imgin.src="/gfx/d.gif";function filter(imagename,objectsrc){if(document.images){document.images[imagename].src=eval(objectsrc+".src")}}function shoh(id){if(document.getElementById){if(document.getElementById(id).style.display=="none"){document.getElementById(id).style.display='block';filter(("img"+id),'imgin')}else{filter(("img"+id),'imgout');document.getElementById(id).style.display='none'}}else{if(document.layers){if(document.id.display=="none"){document.id.display='block';filter(("img"+id),'imgin')}else{filter(("img"+id),'imgout');document.id.display='none'}}else{if(document.all.id.style.visibility=="none"){document.all.id.style.display='block'}else{filter(("img"+id),'imgout');document.all.id.style.display='none'}}}}



2.to recode the program in other way, I used w3compiler, which reduced it to 635(take out the comment W3complier trial version made), it used var b = document and other stuff made the code smaller, but don't know if that change the speed of executing in browsers.

Code:
b=document;c=b.all;e=b.images;h=Image;imgout=new h(9,9);imgin=new h(9,9);imgout.src="/gfx/u.gif";imgin.src="/gfx/d.gif";function g(i,j){if(e){e[i].src=eval(j+".src");}}function k(f){if(b.getElementById){if(b.getElementById(f).style.display=="none"){b.getElementById(f).style.display='block';g(("img"+f),'imgin');}else{g(("img"+f),'imgout');b.getElementById(f).style.display='none'}}else{if(b.layers){if(b.id.display=="none"){b.id.display='block';g(("img"+f),'imgin');}else{g(("img"+f),'imgout');b.id.display='none'}}else{if(c.f.style.visibility=="none"){c.f.style.display='block'}else{g(("img"+f),'imgout');c.f.style.display='none'}}}}

3.I used Packer.exe to do step three(don't know where I get it, this file don't even have about, so I don't know who made it), it turned code into something no one can understand:
Code:
function g(x){n=0;while(x--){if(a<2)a=p.charCodeAt(--l);n+=n+(a&1);a/=2}return n}
p="}}BItJYg[SXOfqDtiliPbisiv@Ref.c`vCeaVcOxsEdXvdilHasrepCHhk^D}J'PP'[xuALP_~pq{esle@Cq'dF',\\)f+\"@FG\"((g;'@kcolb'@~J{)\"ePnon\"==@yalpsi@d.elyt@s.@RfrQPAdIyBP`NelEtpeg.bAFif(kCK}R};)\"BBa\"+j(la@veDR]id[e{)e(@fi{)j,@i(g no@itcnuf@pTdPbcad\"fig.`u/xfg/@\"=crs.@@BSNniDax)9,9P(h wen@=tuogm@i;HLI=Dh;sega@mi@Te;Dlla.b=@c;tnem@ucod=b@";
a=0;d="";l=p.length;while(l){if(g(1)){o=d.length-3-g(8);d+=d.substring(o,o+g(5)+3)}else d+=p.charAt(--l)}document.write(d);

And now, there you go, 542 bytes, even I used winrar's maxium rar ablity, you still only can make that 10 byte less...

I strongly suggest everyone to optimized it to step 2, don't go for step three. 1st, it's almost impossible to understand; second, it take much more resource in the browser than the original script. unless you are in danger of bandwidth and server load(which is not possible unless you got a website that has over 1000 click in the same time and have to send out a JS for each of them.)

step 1 works in HTML, CSS and PHP, but it also have a step that JS usually don't have.
It's the step that remake the file mapping(I won't suggest you do that unless you have already made your site and never want to change it any more)
for example, your HTML has a image with src=image/hahaha.gif, remapper(the only one I have see yet is w3complier, which need to pay) will make it into src=1.gif
and there can be a combonation in HTML, like if there is a lot files use gif as a extention. use JS to make something that change ".im" or anything smaller than".gif" and normally doesn't appear in your html document into ".gif" to save space....

Have fun everyone...Optimizing is ENDLESS....or maybe not....
simplyw00x
That's pretty funky, but your obscenely long code lines break the forum's tables Very Happy
Related topics
secrets of firefox
What wrong with this js file ? Need help .
[JS]Some must have Javascript and related stuffs-updated!!!!
Make HTML, CSS, JS, PHP smaller with out buy a software?
Master Tutorial on SEO
Textfield labels [resolved]
Flat file question
How to create links in one .js file?
Editing a .js file...
can't search file or folder in my computer
Where to put js functions in joomla component?
Validating pages with Scripts
I need web/flash/js help
external js
Reply to topic    Frihost Forum Index -> Scripting -> Others

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.