Performance/ Optimization Tips

General

1. When testing for memory or timings, the first open of a document after bouncing server, always takes huge amount of resources. Hence this one should be ignored for the time being. But you should look into it atleast once to see if the first open can also be optimized.

2. When unsure of the results, perform the same scenario about 10 times to reach a conclusion

3. Compare timing results using a Stop watch with last version and not with some previous build of same version.

4. To get real timings, deploy on some system test server for testing.

5. Lookout for methods being called more than the expected no. of times. But spend your energy only for functions that take a significant amount of time.

Javascript

1. Use a good profiler. For Firefox, Firebug profiler is too good. IE8 comes with a profiler but not so good. Nevertheless, something is better than Nothing.

2. In Java, a lot of optimizations are done by the compiler. But not so for Javascript, we have to do the optimizations ourselves.

3. Minimize DOM interactions. These are costly both in terms of timing and memory.

4. Write a destroy method so as to clean up all code before destroying or replacing the object or its reference.

5. Cleaning up all code – remove all listeners attached to each object. Specifically use the purge() method for it. Then set all variables to null.

6. Bubble Up events. Example having 20 onclick events on 20 buttons. Instead just put on onclick event on say the form tag.

Memory

1. To see the amount of memory consumed use Process Viewer. Avoid the default Windows one.

2. At a given time concentrate on 1 feature.

3. Memory might not be recovered immediately but after sometime, so perform the same case repeatedly to check the amount of memory.

Timing

1. The Firebug profiler will show the absolute timings of methods. So suppose MethodA() calls MethodB() and MethodB() takes 100 ms to complete; then it will also add that timing to MethodA()’s execution.

2. So lookout for real methods which take the time. Here the IE Profiler shines, because it shows the methods in a tree view.

3. Target the top 20-30 methods.

4. Do not be afraid to change anything in the underlying framework. But please test…test….test.

5. For Loops: Normal: for(var i=0; i<array.length; i++) Optimized: for(var i=0, count = array.length; i=i+1)

6. Object References: Normal :

for(......)  
{  
var Object = a.b.c.d.getElement(); 
..... 
}

Optimized:

var dObject = a.b.c.d; 

for(......) 
{ 
var Object = dObject.getElement();
..... 
}