Optimizing Javascripts Web Developing

[hazemmostafa 0]

Hello ,

 

Here are some tips for web developers about JavaScripts ;

 

JavaScript downloaded as source code and then interpreted by the browser.

Because of this, the speed of JavaScript code is split into two categories:

1.Download time

2.Speed of execution

 

Browsers download JavaScript as source code, that means all long variable names and comments are included.

Other factors increase the download time and increase the overall time it takes for the script to run .

 

The best size for a javascript = Single tcp/ip packet = 1160 bytes

Now how to decrease the javascript to this packet size ?

 

Tip(1)

 

Remove all comments

 

Although these comments are ignored by the execution process as we all know BUT

 

Comments increase the js size means increase download time

Also comments make it easy for anyone to get the script idea

 

Tip(2)

 

Remove tabs and spaces

 

Increasing readability is ok if you are tring to teach scripts in tutorials or so BUT

 

Browsers do not need these tabs and spaces to understand your scripts ,

So remove them

look at this

function dothis ( arg1, arg2, arg3 ) { alert(arg1 + arg2 + arg3); }

see all the spaces

 

function dothis(arg1,arg2,arg3){alert(arg1+arg2+arg3);}

 

12 spaces = 12 bytes removed !

 

Use semicolons ( at the end of each line to preserve the syntactical mean of script code.

 

Tip(3)

 

Remove all line breaks

 

Line breaks increase the readability of your code to prying eyes.

Removing them is a fast, easy way to make it more difficult for anyone to get your code.

 

Tip(4)

 

Replace variable names

 

Any variable name should be replaced with a nonsense variable name that has no meaning when read in the code.

After all, the name of the variable doesnât matter to browsers.

Eliminate those descriptive variable names with simpler,

 

You dont need to name the variable i.e. myimages OR url_destination ..... etc

 

Just repalce url_destination with ud and myimages with mg ....... like that

Variables names now have no meaing , smaller and still working BUT

 

For editing a variable name do read and understand its function before changing its name .

Dont just use Find and Repalce method in a text editor

 

 

Dont forget to save a copy of the script before you start

 

 

 

Hope you like it

 

 

hazemmostafa

[hazemmostafa 0]

Hello ,

 

 

Part (2)[/b]

 

 

 

Please remember :

 

var a1 = true ;

var a2 = false ;

 

is the same as

 

var a1=1 ;

var a2=0 ;

 

you just earned 10 bytes

 

 

ALSO look at this :

 

if (somevariable != undefined) {

//do something

}

if (somevariable != null) {

//do this

}

if (somevariable != false) {

//do this

}

 

is the same as

 

if (!somevariable) {

//do this

}

 

 

Also remember

 

var a1 = new Array;

 

same as

 

var a1 = [];

 

 

And

 

var a2 = new Object;

 

same as

 

var a2 = {};

 

 

And

 

var b1 = new Object;

b1.color = “white”;

b1.name = “paper”;

 

is the same as

 

var b1 = { color: “white”, name: “paper” };

 

 

 

 

Hope you like it

 

 

hazemmostafa

[jimmy89 0]

Another great tool is the JS Minifier that was posted on this board http://forums.xisto.com/topic/92729-topic/?findpost=1064367213 earlier in the year. It basically removes all the whitespaces, which can dramatically reduce your code length.

It can be found at http://fmarcia.info/jsmin/test.html

Happy Scripting
-jimmy

[Rs-Server 0]

Nice Tutorial.I give it a 8/10! Congradulations

[Deranged Gamers 0]

ya ya ya, but is there a program to help with javascript

[Deranged Gamers 0]

i know there are programs to help with java, i just cant fin them. anyways wouldnt any rogram do that. im jus wondering y do it manually if there are programs to do that for you. sorry im new to java but i do want to learn.

[ethergeek 0]

Don't forget about code obfuscation! Because obfuscation tends to replace with smaller variable names that make no sense, it can also have a dramatic effect upon the size of your final script. I don't know of any for javascript (google to the rescue here) but I use retroguard (for java) and dotfuscator (for .net) and it trims my binaries quite nicely.

Edited July 3, 2007 by ethergeek (see edit history)

[Quatrux 4]

Yeah, those tips are nice to optimize your scripts and usually you can even use a simple text editor which has those features to removes whitespaces or tabs and as it has been posted to use those tools, I also remember to see those kind of tools and I was able to optimize some of mine codes, also those tools had a different level of optimizing, but the highest wasn't readable at all. Nice tips for a lot of people.