Performance

ASP.NET AJAX Best Practices: Careful with DOM element concatenation

Tanzim Saqib — Tue, 05 Feb 2008 12:51:41 GMT

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;
}

[New Article] ASP.NET AJAX Best Practices

Tanzim Saqib — Sun, 27 Jan 2008 07:21:33 GMT

While we develop AJAX applications, we often carelessly ignore giving up bad practices, which cause effects which are not so significantly visible when the site is not so large in volume. But, it’s often severe performance issue when it is the case for sites that make heavy use of AJAX technologies such as Pageflakes, NetVibes etc.

There are so many AJAX widgets in one page that little memory leak issues combined may even result the site crash into very nasty “Operation aborted”. There are a lot of WebService calls, lot of iterations among collection so that inefficient coding in a whole lead to make site very heavy, browser eats up a lot of memory, requires very costly CPU cycles, and ultimately causes unsatisfactory user experience. In this article many of such issues are demonstrated in the context of ASP.NET AJAX.

http://www.codeproject.com/KB/ajax/AspNetAjaxBestPractices.aspx

ASP.NET AJAX Best Practices: Avoid String concatenation, use Array instead

Tanzim Saqib — Tue, 15 Jan 2008 12:44:43 GMT

Don't you think the following block of code has written keeping every possible good practice in mind? Any option for performance improvement?

function pageLoad()
{
    var stringArray = new Array();
    
    // Suppose there're a lot of strings in the array like:
    stringArray.push('<div>');
    stringArray.push('some content');
    stringArray.push('</div>');
    
    // ... code edited to save space
    
    var veryLongHtml = $get('divContent').innerHTML;
    var count = stringArray.length;
    
    for(var i=0; i<count; ++i)
        veryLongHtml += stringArray[i];    
}

Well, as you see the innerHTML of the div has been cached so that browser will not have to access the DOM every time while iterating through stringArray, thus costlier DOM methods are being avoided. But, inside the body of the loop the JavaScript interpreter has to perform the following operation:

veryLongHtml = veryLongHtml + stringArray[i];

And the veryLongHtml contains quite a large string which means in this operation the interpreter will have to retrieve the large string and then concatenate with the stringArray elements in every iteration. One very short yet efficient solution to this problem is using join method of the array like the following, instead of looping through the array:

veryLongHtml = stringArray.join('');

However, this is very efficient than the one we were doing, since it joins the array with smaller strings which requires less memory.

ASP.NET AJAX Best Practices: Introduce function delegates

Tanzim Saqib — Sat, 12 Jan 2008 12:46:26 GMT

Take a look at the following loop. This loop calls a function in each iteration and the function does some stuffs. Can you think of any performance improvement idea?

for(var i=0; i<count; ++i)
    processElement(elements[i]);

Well, for sufficiently large array, function delegates may result in significant performance improvement to the loop.

var delegate = processElement;
    
for(var i=0; i<count; ++i)
    delegate(elements[i]);

The reason behind performance improvement is, JavaScript interpreter will use the function as local variable and will not lookup in its scope chain for the function body in each iteration.

ASP.NET AJAX Best Practices: Introduce DOM elements and function caching

Tanzim Saqib — Fri, 11 Jan 2008 12:48:01 GMT

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

Tanzim Saqib — Fri, 11 Jan 2008 01:26:03 GMT

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

Tanzim Saqib — Thu, 10 Jan 2008 12:52:38 GMT

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: Reduce scopes

Tanzim Saqib — Mon, 07 Jan 2008 01:44:10 GMT

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

Tanzim Saqib — Sun, 06 Jan 2008 14:11:47 GMT

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.

JavaScript execution before the page has finished loading

Tanzim Saqib — Wed, 07 Feb 2007 02:58:40 GMT

When a webpage loads, it fetches the stylesheets, javascript, images, other objects etc. So, when it is done, it's already late and user may complain about the site's poor speed of execution. One way you can make it faster, you can start JavaScript execution immediately right after the HTML DOM has finished loading and ready to traverse, before the images.

// Introduce our custom event onDOMReady 
window.onDOMReady = DOMReady  

function DOMReady(fn) 
{ 
    // According to standard implementation 
     if(document.addEventListener) 
        document.addEventListener("DOMContentLoaded", fn, false);  

    // IE 
    else 
        document.onreadystatechange = function() 
            { 
                checkReadyState(fn); 
            } 
}  

function checkReadyState(fn) 
{ 
    if(document.readyState == "interactive") 
        fn(); 
}  

window.onDOMReady( 
    function() 
    { 
        // DOM is loaded 
        // So start JavaScript execution 
    } 
);