This JavaScript article tutorial is not written by a JavaScript expert, but it still contains many helpful JavaScript tips and tricks to improve your JavaScript coding skills.

• Demo
• Enlarge
• Reload
• New window

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

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New