Javascript optimisation

Javascript is client side language and is run on browser. As the code would be run on client side we need to reduce the time taken for execution of response.Of course, most of the time it is not needed in everyday JavaScript. There are some things to keep in mind about speed optimization. We need to design out algoritm in an optimsed way so that it would take less time for execution.  As the code is run on client side we must structure our code well so that end user should not have to wait for page load. We just cant consider javascript but we need to concentrate on structuring of html,css as well. Minimise the usage of javascript so that it incress the performance of page.

In this blog I will concentrate more on good habbits of javascript coding. We should know when our javascript needs to be called. Sometimes we may need function to be executed on document ready and sometimes on page load . For example attaching the event control for page should be handled after page load as it is not required on document ready. Understand and choose the right way.
"Best practise is nothing but choosing the right way of doing it".

1.      Reduce caching : (Dont cache when not required).

a=x+y*0.5;
z=a+(b*c)/c;

In the above example you don’t  need to cache 'a' you can directly calculate. 

z=(x+y*0.5)+(b*c)/c;

2  Cache whenever you are repeating the values in calculation:

bottomLayerWidth = 5 * ((x/2)*(.5*y));

topLayerWidth = 2 * ((x/2)*(.5*y));

textLayerWidth = (4 + z) * ((x/2)*(.5*y));

statusLayerWidth = (2 + r) * ((x/2)*(.5*y));

Should be changed to so that repeated calculation would be reduced

var changeVal = ((x/2)*(.5*y));

bottomLayerWidth = 5 * changeVal;

topLayerWidth = 2 * changeVal;

textLayerWidth = (4 + z) * changeVal;

statusLayerWidth = (2 + r) * changeVal;

3.      When you are writing a recursive algorithm cache the values whenever require so that you dont have to calculate it again. refer(http://memoizationinjavascript.blogspot.in/)

4.      If you have a series of If-Then-Else statements, you should try your best to organize them from most likely to least likely. This way the program doesn't have to traverse all the unlikely conditions to get to the likely ones, which will be called more often.

5.      Don’t use nested loops if not required.

6.      Use ‘switch’ instead of lengthy ‘if-then-else’ statements.

7.      Avoid Global variable.

8.      Proper scoping of objects would reduce the data collision

9.      Hide the information not required and expose whatever is required.

10.  Encode and decode when your are using ajax request which would load fast.

11.  Avoid dynamic loading of content.

12.  Use lazy loading whenever required.Load the files when dom is loaded completely so that it would not stop user from viewing the web page.

13.  Minimise the use of images .Sprite your images so that it would be loaded fast.

14.  Avoid ajax interactionand try to store in browser local storage so that it would increase the performance. Use ajax whenever required like pull some data from data base for a particular id.

15.  Modularise your javascript code.

16.  Avoid use of libraries(jquery,angular..) when you dont have much of algorithm to be written. They would reduce the time to code but in turn add an extra sec to load the file.

17.  Unbind events when not in use.

18.  Use ‘mouseup’ instead of ‘click’. Remember that user interaction via the mouse or keyboard fires several events in a specific order. It is useful to remember the order in which these events fire so you can squeeze in your functionality before anything else gets handled, including native browser event handlers.

19.  Use currrying whenever required. Function would be partially executed.

20.  Use chaining                                                                                                                                      

var people = helper.getPeople(); 

var bob = people.find("bob");

var email = bob.getEmail(); 

helper.getPeople().find("bob").getEmail();

21.  Save bytes by using Minification.

22.  Avoid biniding events to body or document. attach events to document or body only when added dynamically.

23.  Avoid Function Inlining. Function Inlining helps to eliminate call costs, and replaces a function call with the body of the called function. In JavaScript, performing a function call is an expensive operation because it takes several preparatory steps to perform: allocating space for parameters, copying the parameters, and resolving the function name.

24.  Don’t misuse for-in Because the “for-in” loop requires the script engine to build a list of all the enumerable properties, coding inside for loop does not modify the array. It iterates pre-compute the length of the array into a variable len inside for loop scope.
\Use the attributes properly when and where required. for example atl attribute is very much required in img tag if the image crashe to load atleast you can display what image is that by adding content to alt tag.
a

26.  Avoid using try-catch-finally. Whenever the catch clause is executed, where the caught exception object is assigned to a variable, “try-catch-finally” creates a new variable in the current scope at runtime. A number of browsers do not handle this process efficiently because the variable is created and destroyed at runtime. Avoid it!