Efficient Javascript Programming


I am not an expert in Javascript. Though, I can share some points which are more significant when you use javascript in your applications.

  • Cache element property when access multiple times. In DOM, it’s an extensive search of the element to find the same property over and over again. Perfect example is document object

var divelt = document.getElementById(“div1”);
var img = document.getElementByTagName(“img”);

instead use

var doc = document
var divelt = doc.getElementById(“div1”);

  • Use Local variables rather than Global variables, because local variables are fast, global variables are little performance penalty.

for(i=0; i < array.count; i++){
alert(“array data : ” +array[i]);
}

store array.count into local variable like count = array.count and use it.

for(i=0; i < count; i++){
alert(“array data : ” +array[i]);
}

  • Don’t use eval() when not necessary
    • eval statement is expensive in terms of performance
    • eval parameters are executed dynamically. So it’s hard to understand the program and the program is not more reliable.
  • Don’t wrap try/catch within loops. – Every catch statement, javascript creates dynamically scope.
  • Don’t pass function as a string to setTimeout()setTimeout(“myFunction()”,””) – Internally this will use eval statement instead use function reference like setTimeout(myFunction,….).
  • Don’t use symbol + for concatenating strings, use String.concat() or Array.join
  • Don’t use function constructor like new Function() –  as equal to eval method.
  • Don’t use “with” statement. – Used to define the new scope of the element. It is more expensive to look up variables in other scope.

with(document.getElementById(“divid”).style){
color = ‘#fff’;
width = ‘150px’;
backgroundcolor =’#000′;
}

Javascript has better alternatives for this.

var divobj = document.getElementById(“divid”);
divobj.style.color = ‘#fff’;
divobj.style.width = ‘150px’;
divobj.style.backgroundcolor = ‘#000’;

  • Cache offsetHeight/offsetWidth before using computation – Every time there is an internal re-flow happening

Re-flow happens at Initial page load, Browser window resize, Layout style changes, Add/Remove DOM nodes.

  • Use innerHTML to insert the element into the node
Advertisements

Tags: , , , , , , ,

2 Responses to “Efficient Javascript Programming”

  1. Jameel Says:

    Useful article. All these alternative ways can be used only to imporve performance or for anyother reasons ? Thank you.

  2. manikandanmv Says:

    Jameel,

    Obviously for performance improvement.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: