Geeks With Blogs

News Photo of Tanzim Saqib Tanzim Saqib is a Senior Developer, who spent half of his life on software and worked for many companies like #1 .NET controls provider Telerik Inc, #1 personalized Web 2.0 start-page like Pageflakes (acquired by LiveUniverse). He developed many projects ranging from banking solutions for Citibank, HSBC, Wamu, Wells Fargo etc. to Paperless Virtual University. He is industry's earliest and leading widget developer and as know as "Widget Master" to his peers.

He is a preacher of Microsoft technologies. While he jams with the latest additions to .NET, in his spare time he blogs at http://weblogs.asp.net/TanzimSaqib, maintains his personal website http://www.TanzimSaqib.com, leads .NET Research group. writes articles.

He is an easy going, fun loving, and passionate technology individual who is open to any kind of business opportunity and professional relationship. He currently lives in Bangladesh, but travels anywhere in the world on professional demand.

Email: me at TanzimSaqib dot com
Tanzim Saqib on .NET discovery Innovate. Create. Share.

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;
}  
Posted on Tuesday, February 5, 2008 6:51 AM JavaScript , Performance | Back to top


Comments on this post: ASP.NET AJAX Best Practices: Careful with DOM element concatenation

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Tanzim Saqib | Powered by: GeeksWithBlogs.net