JavaScript: How to handle DOM to increase performance and optimization.

[sgmb id=3]

Hey folks,

Till now we talked about increasing performance by dynamic loading and handling scope intelligently. If you missed them read about them, links mentioned at the bottom.

In this article we are going to talk about DOM and how to handle DOM to make most out of it and optimize to increase JS performance. Simply how to handle Handling DOM to increase performance and optimization.

DOM stands for Document Object Model. It is language independent API for working with HTML and XML.

Even though the DOM is a language-independent API, in the browser the interface is implemented in JavaScript. Since most of the work in client-side scripting has to do with the underlying document, DOM is an important part of everyday JavaScript coding.

DOM and Javascript are two independent functionalities, thus to access one via the other costs the performance. It is very smartly defined as a toll bridge which connects Javascript and DOM. Every time you cross the bridge you have to pay the toll and that toll is performance cost (see John Hrvatin, Microsoft, MIX09, http://videos.visitmix.com/MIX09/T53F).

So what is the solution, the solution is simple just cross the bridge as less as possible. Means use or manipulate the DOM as less as possible.

Simply accessing the DOM comes at a price and making modification in the DOM is more costly as it makes the browser to make changes in page.

Lets take Example

function change(){
  for(i=0;i<1000;i++){
    document.getElementById('tochange').innerHTML+="hey";
  }
}

The problem with this code is it access the DOM twice in each iteration. Once to read the value from innerHTML and next to make changes to it. This is very costly method to do this. A more efficient method is written below.

function newChange(){
  var text='';
  for(i=0;i<1000;i++){
    text+='hey'
  }
  document.getElementById('tochange').innerHTML+=text;
}

This function will drastically improve the performance almost around 25 to 100 times faster in different browsers. This clearly indicates how costly it is to access and write to DOM.

innerHTML vs DOM Methods 

Which one to use innerHTML or DOM’s createElement Method. The discussion is going on from forever. But what about the performance. innerHTML is more performant that document.createElement but this difference is decreasing with the new browsers. So if you have to build very performance specific app then use innerHTML or you can use anyone in day to day normal apps.

Cloning Node

How to increase performance while using HTML collections.

Html collections are the array like objects that holds DOM element references, these are like this

var eles=document.getElementByClassName('abc');
for(i =0; i < eles.length;i++){
  console.log(eles[i]);
}

var eles=document.getElementByClassName('abc');
var length_eles=eles.length;

for(i =0; i <length_eles;i++){
 console.log(eles[i]);
}

// slow
 function collectionGlobal() {

var coll = document.getElementsByTagName('div'), len = coll.length,
 name = '';

for (var count = 0; count < len; count++) {
 name = document.getElementsByTagName('div')[count].nodeName;
 name = document.getElementsByTagName('div')[count].nodeType;
 name = document.getElementsByTagName('div')[count].tagName;

}
 return name;

};


// faster
 function collectionLocal() {

var coll = document.getElementsByTagName('div'),
 len = coll.length,
 name = '';

for (var count = 0; count < len; count++) { 
 name = coll[count].nodeName;
 name = coll[count].nodeType;
 name = coll[count].tagName;

}
 return name;

};

//fastest

function collectionNodesLocal() {

 var coll = document.getElementsByTagName('div'), 
  len = coll.length,
  name = '',
  el = null;

for (var count = 0; count < len; count++) { 
 el = coll[count];
 name = el.nodeName;
 name = el.nodeType;
 name = el.tagName; 
}

return name; };