DIY Minification
No minifier can compress properly a bad code.
In this example i just wanna show how much a minifier does.
What you should do before you minify
And regarding jQuery… i don’t use jQuery.jQuery is for old browsers,it was made for compatibility reasons .. check caniuse.com, almost everything works on every browser (also ie10 is standardized now) , i think now it’s just here to slow down your web application…if you like the $()
you should create your own simple function.And why bother to compress your code if your clients need to download the 100kb jquery script everythime?how big is your uncompressed code? 5-6kb..? Not to talk about the tons of plugins you add to to make it easier.
Original Code
When you write a function you have an idea, start to write stuff and sometimes you end up with something like the following code.The code works.Now most people stop thinking and add this to a minifier and publish it.
function myFunction(myNumber){ var myArray = new Array(myNumber); var myObject = new Object(); var myArray2 = new Array(); for(var myCounter = 0 ; myCounter < myArray.length ; myCounter++){ myArray2.push(myCounter); var myString = myCounter.toString() myObject[ myString ] = ( myCounter + 1 ).toString(); } var myContainer = new Array(); myContainer[0] = myArray2; myContainer[1] = myObject; return myContainer; }
Here iss the minified code (i added the new lines)
Minified using (http://javascript-minifier.com/)
function myFunction(r){ for(var n=new Array(r),t=new Object,e=new Array,a=0;a<n.length;a++){ e.push(a); var o=a.toString(); t[o]=(a+1).toString() } var i=new Array; return i[0]=e,i[1]=t,i }
But are all those vars , ifs, loops & definitions necessary?
Most of the time NO !
- Remove unnecessary if,loop,var
- Keep a copy of your original code
- Use the minifier
OPTIONAL (increases the performance & shorter code)
- use shorthand operators
- use bitwise operators (don’t use
Math
) - use a,b,c… for your temp vars
- use the old syntax (
while
,for
… notforEach
) - use the function arguments as placeholder (in some cases)
- remove unneccessary
"{}","()",";",spaces,newlines
- Use the minifier
Now if a minifier can compress the code your doing it wrong.
No minifier can compress properly a bad code.
DIY
function myFunction(a,b,c){ for(b=[],c={};a--;)b[a]=a,c[a]=a+1+''; return[b,c] }
It does exactly the same thing as the codes above.
Performance
You always need to think what you need:
Before you say “Noone would write code like the one below” go and check the first 10 questions in here …
Here are some common examples i see every ten minutes.
Want a reusable condition
if(condition=='true'){ var isTrue=true; }else{ var isTrue=false; } //same as var isTrue=!!condition
Alert yes only if it exists
if(condition==true){ var isTrue=true; }else{ var isTrue=false; } if(isTrue){ alert('yes'); } //same as !condition||alert('yes') //if the condition is not true alert yes
Alert yes or no
if(condition==true){ var isTrue=true; }else{ var isTrue=false; } if(isTrue){ alert('yes'); }else{ alert('no'); } //same as alert(condition?'yes':'no') //if the condition is true alert yes else no
Convert a number to a string or viceversa
var a=10; var b=a.toString(); var c=parseFloat(b) //same as var a=10,b,c; b=a+''; c=b*1 //shorter var a=10; a+='';//String a*=1;//Number
Round a number
var a=10.3899845 var b=Math.round(a); //same as var b=(a+.5)|0;//numbers up to 10 decimal digits (32bit)
Floor a number
var a=10.3899845 var b=Math.floor(a); //same as var b=a|0;//numbers up to 10 decimal digits (32bit)
switch case
switch(n) { case 1: alert('1'); break; case 2: alert('2'); break; default: alert('3'); } //same as var a=[1,2]; alert(a[n-1]||3); //same as var a={'1':1,'2':2}; alert(a[n]||3); //shorter alert([1,2][n-1]||3); //or alert([1,2][--n]||3);
try catch
if(a&&a[b]&&a[b][c]&&a[b][c][d]&&a[b][c][d][e]){ console.log(a[b][c][d][e]); } //this is probably the onle time you should use try catch var x; try{x=a.b.c.d.e}catch(e){} !x||conole.log(x);
more if
if(a==1||a==3||a==5||a==8||a==9){ console.log('yes') }else{ console.log('no'); } console.log([1,3,5,8,9].indexOf(a)!=-1?'yes':'no');
but indexOf
is slow read this https://stackoverflow.com/a/30335438/2450730
numbers
1000000000000 //same as 1e12 var oneDayInMS=1000*60*60*24; //same as var oneDayInMS=864e5; var a=10; a=1+a; a=a*2; //same as a=++a*2;
Some nice articles/sites i found about bitwise/shorthand:
http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/
http://www.jquery4u.com/javascript/shorthand-javascript-techniques/
There are also many jsperf sites showing the performance of shorthand & bitwsie if you search with your favorite searchengine.
I could go one for hours.. but i think it’s enough for now.
if you have some questions just ask.
And remember
No minifier can compress properly a bad code.