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
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
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.
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:
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....
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....
