Optimizing Javascripts - Web Developing

free web hosting
Free Web Hosting > Computers & Tech > How-To's and Tutorials > Programming > Client Side Scripting > Javascript

Optimizing Javascripts - Web Developing

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

CODE
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 wink.gif

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
CODE
function dothis ( arg1, arg2, arg3 ) { alert(arg1 + arg2 + arg3); }


see all the spaces

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


12 spaces = 12 bytes removed !

Use semicolons (wink.gif 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 smile.gif



Hope you like it


hazemmostafa

 

 

 


Reply

hazemmostafa
Hello ,


[b]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 smile.gif


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

 

 

 


Reply

Jimmy89
Another great tool is the JS Minifier that was posted on this board http://www.astahost.com/index.php?showtopic=15243 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

Reply

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

Reply

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

Reply

Deranged Gamers
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.

Reply

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

Reply

Quatrux
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. wink.gif Nice tips for a lot of people. wink.gif

Reply


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.

Similar Topics

Keywords : optimizing javascripts web developing


    Looking for optimizing, javascripts, web, developing

*RANDOM STUFF*





*SIMILAR VIDEOS*
Searching Video's for optimizing, javascripts, web, developing
advertisement




Optimizing Javascripts - Web Developing



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute your information that might help someone here.
Ask your Doubts & Queries to get answers.. "Together, We enlight each other!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE