ASP.NET AJAX Best Practices: Avoid using Array.length in a loop
In one of my earlier posts, I talked about DOM element accessing in a loop but forgot to talk about a very common, yet performance issue in AJAX. We often use code like the following:
var items = []; // Suppose a very long array for(var i=0; i<items.length; ++i) ; // Some actions
It can be a severe performance issue if the array is so large. JavaScript is an interpreted language, so when interpreter executes code line by line, every time it checks the condition inside the loop, you end up accessing the length property every time. Where it is applicable, if the contents of the array does not need to be changed during the loop’s execution, there is no necessity to access the length property every time. Take out the length in a variable and use in every iteration:
var items = []; // Suppose a very long array var count = items.length; for(var i=0; i<count; ++i) ; // Some actions
ASP.NET AJAX Best Practices: Avoid getters, setters
Make minimum use of setters and getters if possible. Such accessors look like .NET like kind of beautiful properties, but these create new more scopes for JavaScript interpreter to deal with. If applicable, try directly setting/getting the private variable itself rather implementing methods for getters, setters.
ASP.NET AJAX Best Practices: Reduce scopes
It’s not pretty common. But, if you ever encounter such code, be sure it’s a very bad practice. Introducing more scopes is a performance issue for JavaScript interpreter. It adds a new scope in the ladder. See the following sample scope:
function pageLoad() { scope1(); function scope1() { alert(’scope1′); scope2(); function scope2() { alert(’scope2′); } } }
Introducing more scopes enforces the interpreter to go through new more sections in the scope chain that it maintains for code execution. So, unnecessary scopes reduce performance and it’s a bad design too.
ASP.NET AJAX Best Practices: Avoid using your own method while there is one
Avoid implementing your own getElementById method that will cause script to DOM marshalling overhead. Each time you traverse the DOM and look for certain HTML element requires the JavaScript interpreter to marshalling script to DOM. It’s always better to use getElementById of document object. So, before you write a function, make sure similar functionality can be achieved from some other built-in functions.
ASP.NET AJAX Best Practices: Careful with DOM element concatenation
It’s a very common bad practice. We often iterate through array, build HTML contents and keep on concatenating into certain DOM element. Every time you execute the block of code under the loop, you create the HTML markups, discover a div, access the innerHTML of a div, and for += operator you again discover the same div, access its innerHTML and concatenate it before assigning.
function pageLoad() { var links = ["microsoft.com", "tanzimsaqib.com", "asp.net"]; $get(‘divContent’).innerHTML = ‘The following are my favorite sites:’ for(var i=0; i<links.length; ++i) $get(‘divContent’).innerHTML += ‘<a href="http://www.’ + links[i] + ‘">http://www.’ + links[i] + ‘</a><br />’; }
However, as you know accessing DOM element is one the costliest operation in JavaScript. So, it’s wise to concatenate all HTML contents in a string and finally assign to the DOM element. That saves a lot of hard work for the browser.
function pageLoad() { var links = ["microsoft.com", "tanzimsaqib.com", "asp.net"]; var content = ‘The following are my favorite sites:’ for(var i=0; i<links.length; ++i) content += ‘<a href="http://www.’ + links[i] + ‘">http://www.’ + links[i] + ‘</a><br />’; $get(‘divContent’).innerHTML = content; }
