Simple but Effective JavaScript Coding Basics

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.


Sampled by © JavaScriptBank.com

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

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB
WordPress Landing Page Conversion Essentials to Convert More
4 Development Hacks To Make Your Website Launch A Success
Why Data Recovery Software and Services are Important
Why Engineers Specializing in DevOps Are the Wave of the Future
The Ultimate Checklist for HTTP to HTTPS Migration


Top view articles
65 Free JavaScript Photo Gallery Solutions
Top 10 Beautiful Christmas Countdown Timers
Best Free Linux Web Programming Editors
Top 50 Most Addictive and Popular Facebook mini games
Top 10 Free Web Chat box Plug-ins and Add-ons
50+ Beautiful Resources of HTML Form using CSS and JavaScript
Top 10 Best JavaScript eBooks that Beginners should Learn
The Ultimate JavaScript Tutorial in Web Design
HTML5 Web Workers Multithreading in JavaScript
Learn more about JavaScript Inheritance with Tiny JavaScript Example Codes


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com