ASP.NET AJAX Best Practices: Introduce DOM elements and function caching
We have seen DOM caching before and function delegation is also a kind of function caching. Take a look at the following snippet:
for(var i=0; i<count; ++i) $get(‘divContent’).appendChild(elements[i]);
As you can figure out the code is going to be something like:
var divContent = $get(‘divContent’); for(var i=0; i<count; ++i) divContent.appendChild(elements[i]);
That is fine, but you can also cache browser function like appendChild. So, the ultimate optimization will be like the following:
var divContentAppendChild = $get(‘divContent’).appendChild; for(var i=0; i<count; ++i) divContentAppendChild(elements[i]);
ASP.NET AJAX Best Practices: Problem with switch
Unlike .NET languages or any other compiler languages, JavaScript interpreter can not optimize switch block. Especially when switch statement is used with different types of data, it’s a heavy operation for the browser due to conversion operations occur in consequences, it’s an elegant way of decision branching though.
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.
